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

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

  b. 主機(jī)不一樣
  c. 端口不一樣

跨域有無問題:

  a. ajax請(qǐng)求會(huì)產(chǎn)生問題, 這是瀏覽器處理的結(jié)果
  b. 通過url(統(tǒng)一資源定位)獲取的圖片(資源)也是一種跨域,但是不會(huì)產(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è)置為* ===> 允許所有請(qǐng)求地址通過

優(yōu)缺點(diǎn):

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

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

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

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

jsonp配置

配置全局js

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

頁(yè)面發(fā)送請(qǐng)求