同源策略(跨域的原因)

• 端口相同
• 域名相同
• 協(xié)議相同
  同源策略的目的，是為了保證用戶(hù)信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)

同源策略的限制范圍

• Cookie、localStorage 和IndexDB無(wú)法讀取
• DOM無(wú)法獲得
• AJAX 請(qǐng)求不能發(fā)送

跨域通信的方式

• JSONP
• CORS
• Hash
• postMessage
• WebSoket
• 代理

JSONP跨域

瀏覽器雖然有同源策略限制，但是像cript標(biāo)簽、link標(biāo)簽、img標(biāo)簽、iframe標(biāo)簽，這種在標(biāo)簽上通過(guò)src地址來(lái)加載一些內(nèi)容的時(shí)候?yàn)g覽器是允許進(jìn)行跨域請(qǐng)求的，所以JSONP的原理就是

• 創(chuàng)建一個(gè)script標(biāo)簽，這個(gè)script標(biāo)簽的src就是請(qǐng)求的地址
• 這個(gè)script標(biāo)簽插入到DOM中，瀏覽器就根據(jù)src地址訪問(wèn)服務(wù)器資源
• 返回的資源是一個(gè)文本，但是因?yàn)槭窃趕cript標(biāo)簽中，瀏覽器就會(huì)執(zhí)行它
• 而這個(gè)文本恰好是函數(shù)調(diào)用的形式，即函數(shù)名(數(shù)據(jù))，瀏覽器會(huì)把它當(dāng)做JS代碼來(lái)執(zhí)行即調(diào)用這個(gè)函數(shù)
• 只要提前約定好這個(gè)函數(shù)名，并且這個(gè)函數(shù)存在于window對(duì)象中，就可以把數(shù)據(jù)傳遞給處理函數(shù)

CORS跨域

CORS(Cross-origin resource sharing) 跨域資源請(qǐng)求
瀏覽器在請(qǐng)求一個(gè)跨域資源的時(shí)候，如果是跨域的Ajax請(qǐng)求，它會(huì)在請(qǐng)求頭中添加提個(gè)origin，但是他不知道這個(gè)資源服務(wù)器是否允許跨域請(qǐng)求，瀏覽器會(huì)發(fā)送到服務(wù)端，如果服務(wù)器返回的頭中沒(méi)有'Access-Control-Allow-Origin：對(duì)應(yīng)網(wǎng)址或 * '的話，那么瀏覽器就會(huì)把請(qǐng)求內(nèi)容給忽略掉，并且在控制臺(tái)報(bào)錯(cuò)

CORS限制

允許請(qǐng)求的方法
- GET
- POST
- HEAD
允許請(qǐng)求的Content-Type
- text/plain
- mutipart/form-data
- application/x-www-form-ulencoded
其他類(lèi)型的請(qǐng)求方法和Content-Type需要通過(guò)預(yù)請(qǐng)求驗(yàn)證后才能發(fā)送

Hash值跨域通信

背景：在頁(yè)面A下提供iframe或frame嵌入了跨域的頁(yè)面B
容器頁(yè)面 -> 嵌入頁(yè)通信：
在A頁(yè)面中改變B的url中的hash值，B不會(huì)刷新，但是B可以通過(guò)window.onhashchange時(shí)間監(jiān)聽(tīng)到hash變化

postMessage通信

// 窗口A
window.postMessage('data','http://a.com')
// 窗口B
window.addEventListener('message',function(event){
  console.log(event.origin)  // http://a.com
  console.log(event.source)  // A對(duì)象的window引用
  console.log(event.data)   // 數(shù)據(jù)
})

WebSocket 跨域通信

var ws = new WebSocket('wss://echo.websoket.org') // 后端接口
ws.onopen = function(e){
  ws.send('hello')
}
ws.onmessage = function(e){
console.log(e.data)  
}
ws.onclose = function(e){
 console.log('連接關(guān)閉')
}

代理

可以通過(guò)nginx代理、node Server進(jìn)行請(qǐng)求轉(zhuǎn)發(fā)