摘要：跨域跨域產(chǎn)生原因協(xié)議名不一樣主機不一樣端口不一樣跨域有無問題請求會產(chǎn)生問題這是瀏覽器處理的結(jié)果通過統(tǒng)一資源定位獲取的圖片資源也是一種跨域但是不會產(chǎn)生問題處理跨域的方法只支持返回響應(yīng)頭允許跨域開發(fā)中使用服務(wù)器代理例如一服務(wù)器端設(shè)置響

跨域產(chǎn)生原因:
a. 協(xié)議名不一樣

  b. 主機不一樣
  c. 端口不一樣

跨域有無問題:

  a. ajax請求會產(chǎn)生問題, 這是瀏覽器處理的結(jié)果
  b. 通過url(統(tǒng)一資源定位)獲取的圖片(資源)也是一種跨域,但是不會產(chǎn)生問題

處理跨域的方法

  jsonp    只支持get
  cors    返回響應(yīng)頭,允許跨域
  prory  開發(fā)中使用服務(wù)器代理(例如: webpack-dev-server) 

服務(wù)器端:

response.setHeader("Acoss-Control-Allow-Origin", "*") // 設(shè)置響應(yīng)頭,允許接收地址設(shè)置

不要設(shè)置為* ===> 允許所有請求地址通過

優(yōu)缺點:

不需要前端設(shè)置, 后臺設(shè)置

不安全, 沒有http服務(wù)的服務(wù)器不支持

根據(jù)后臺的函數(shù)名, 設(shè)置全局的腳本函數(shù), 設(shè)置接收數(shù)據(jù)的回調(diào)函數(shù)

發(fā)送標(biāo)簽src的http請求, 不是異步ajax(http)請求a

jsonp配置

配置全局js

 // jsonp.js
function fn (data){
    console.log(data)
}

頁面發(fā)送請求