同源策略

為了防止跨域請求偽造攻擊，瀏覽器用同源策略的機(jī)制來保證安全。同源策略必須是：協(xié)議相同，域名相同，端口相同

JSONP

由于script腳本不受跨域限制，我們可以運(yùn)用這個特性來請求數(shù)據(jù)， 我們可以發(fā)送一個帶callback的請求到服務(wù)端，如www.abc.com/api?callback=func, 而服務(wù)器根據(jù)你的callback來返回json數(shù)據(jù)。這個例子會返回類似

func({data: 'test' }) 復(fù)制代碼

由于你的func函數(shù)已經(jīng)在本地定義好了, 上述返回的script腳本會直接運(yùn)行你本地的代碼，

function func(data) {console.log(data) } 復(fù)制代碼

通過這個原理我們可以動態(tài)添加script來調(diào)用， 一些庫包括jQuery已經(jīng)包裝好了，我們可以直接使用

Hash

// 利用hash，場景是當(dāng)前頁面 A 通過iframe或frame嵌入了跨域的頁面 B// 在A中偽代碼如下：var B = document.getElementsByTagName('iframe');B.src = B.src + '#' + 'data';// 在B中的偽代碼如下window.onhashchange = function () {var data = window.location.hash;}; 復(fù)制代碼

CORS 跨域訪問

瀏覽器會檢查服務(wù)器的響應(yīng)頭域，進(jìn)而判斷是否允許當(dāng)前站點(diǎn)訪問。 一些常見的響應(yīng)頭域有

Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Allow-Methods Access-Control-Allow-Headers Access-Control-Expose-Headers Access-Control-Max-Age 復(fù)制代碼

通過代理服務(wù)器請求

可以通過自己的服務(wù)器請求數(shù)據(jù)， 或者用代理服務(wù)器

Websocket

var ws = new WebSocket('wss://echo.websocket.org');ws.onopen = function (evt) {console.log('Connection open ...');ws.send('Hello WebSockets!');};ws.onmessage = function (evt) {console.log('Received Message: ', evt.data);ws.close();};ws.onclose = function (evt) {console.log('Connection closed.');}; 復(fù)制代碼

postMessage

//a.com/index.html <iframe src="b.com/index.html" id="ifr"> </iframe> <script> window.onload = function(){var iframe = document.getElementById('ifr');var targetOrigin = 'http://b.com'; // 若寫成'http://b.com/c/proxy.html'效果一樣// 若寫成'http://c.com'就不會執(zhí)行postMessage了iframe.contentWindow.postMessage('data to send',targetOrigin); } </script>// b.com/index.html <script type="text/javascript">window.addEventListener('message',function(event){// 通過origin屬性判斷消息來源地址if(event.origin == 'http://a.com'){console.log(event.data);console.log(event.source);}},false); </script> 復(fù)制代碼

document.domain

通過修改document.domain

允許跨域的標(biāo)簽

img, link, script

總結(jié)

以上是生活随笔為你收集整理的如何解决跨域的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。