同源策略

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

JSONP

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

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

由于你的func函數已經在本地定義好了, 上述返回的script腳本會直接運行你本地的代碼，

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

通過這個原理我們可以動態添加script來調用， 一些庫包括jQuery已經包裝好了，我們可以直接使用

Hash

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

CORS 跨域訪問

瀏覽器會檢查服務器的響應頭域，進而判斷是否允許當前站點訪問。 一些常見的響應頭域有

Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Allow-Methods Access-Control-Allow-Headers Access-Control-Expose-Headers Access-Control-Max-Age 復制代碼

通過代理服務器請求

可以通過自己的服務器請求數據， 或者用代理服務器

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.');}; 復制代碼

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'就不會執行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> 復制代碼

document.domain

通過修改document.domain

允許跨域的標簽

img, link, script

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。