JavaScript跨域的解決方式總結（程式碼）

這篇文章帶給大家的內容是關於跨域的解決方式總結（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

同源政策：協定、網域名稱、連接埠皆相同。

非同源限制：

cookie、localStorage、indexDB無法讀取。

DOM無法取得。

AJAX請求無法傳送。

解決方式：

一、JSONP

#原則：透過動態加入一個 元素，向伺服器請求JSON資料。伺服器接收請求返回指定具名回呼函數。

eg:

function addScript(src) { var script = document.createElement('script'); script.setAttribute("type", "text/javscript"); script.src = src; document.body.appendChild(script); }

window.onload = function() { addScript("https://segmentfault.com/data?callback=getData"); }

function getData(data) { console.log(data) } 注意： 1、 查詢的Url中callback需要指定回呼函數的名字。 2、 在瀏覽器作為程式碼運行，定義的getData函數會被立即呼叫。 3、傳回的JSON參數作為javascript對象，不是字串，不需要進行JSON轉換。 4、jquery函式庫的 $.getJSON()也可以實作。

$.getJSON("https://segmentfault.com/data?callback=?", function(data) { console.log(data) }) 缺陷： 是GET方式獲取，不支援 POST。

二、window.postMessage

window.postMessage 無論是否同源都允許跨視窗通訊。 postMessage 參數一是傳遞內容，參數二是協定網域連接埠或（*表示不限制網域名稱）

页面一："https://www.segmentfault.com/page1.html" //传递页面 window.onload = function () { if (typeof window.postMessage === undefined) { alert("浏览器不支持postMessage！"); } else { window.open.postMessage({data: "Hello World"}, "https://www.example.com/page2.html"); } } 页面二："https://www.example.com/page2.html" //接收页面 window.addEventListener('message', function(e) { console.log(e.data); },false); 事件接收window.addEventListener('message', function(){});中的message事件物件event有三個屬性： 1、event.source：傳送訊息的視窗 2、event.origin: 訊息發送的網址 3、event.data: 訊息內容

//引用父窗口发送信息给下一个窗口 window.addEventListener('message', receiveMessage); function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*'); } //过滤不是发给本窗口的信息 window.addEventListener('message', receiveMessage); function receiveMessage(event) { if (event.origin !== 'http://www.segmentfault.com/page1.html') return; if (event.data === 'Hello World') { event.source.postMessage('Hello', event.origin); } else { console.log(event.data); } } 三、iframe

iframe載入頁面和src裡面的目標域是同一個網域，是能夠發起ajax請求（父子視窗）。 //前提是同源，不同來源就不會發起ajax請求。

不同視窗同源之間是可以取得window對象，但不能取得window物件的屬性與方法。 //不同來源會報錯

1、document.domain iframe（同源可用-- 跨子域）

document.domain屬性：一級網域相同，二級網域不同可以實現window對象取得。

页面一："https://segmentfault.com/page1.html" window.onload = function() { document.domain = "https://segmentfault.com/"; //设置domain window.getData = function() { //ajax请求 } } 页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //document.domain设置成自身或更高一级的父域，主域必须相同。 document.domain = "https://segmentfault.com/" //设置domain function test() { var win = document.getElementById("iframe").contentWindow; win.getData("https://segmentfault.com/json_domain.php", function() {}) } 缺陷： 主網域得一致 。

2、window.name iframe（非同源可用） window.name 屬性： 在一個視窗的生命週期內，無論是否同源，同一個視窗的載入頁面window.name屬性是共享的，每個頁面都可以操作。

页面一："https://segmentfault.com/page1.html" window.name = "this is data!" 页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //获取window.name function test() { var winName = document.getElementById("iframe").contentWindow.name; winName.src = "https://segmentfault.com/data.html"; //最后需要将iframe的src设置成当前域的一个页面地址 } 缺陷： 相容性不好

3、location.hash iframe（非同源可用） ##片段標識符：片段標識符是指url#號後面的部分。只是改變片段標識符頁面不刷新。

页面一："https://www.segmentfault.com/page1.html" function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'https://www.example.com/page2.html#messgae'; document.body.appendChild(ifr); } function checkHash() { var data = location.hash ? location.hash.substring(1) : ''; } setInterval(checkHash, 2000); 页面二："https://www.example.com/page2.html#messgae" function callBack(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome的安全机制无法修改parent.location.hash， // 所以要利用一个中间的example域下的代理iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'https:/www.segmentfault.com/page3html#somedata'; // 注意该文件在"segmentfault.com"域下 document.body.appendChild(ifrproxy); } } 页面三："ttps:/www.segmentfault.com/page3html#somedata" //因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1); 缺點：資料暴露在url，長度也有限制。

四、WebSocket

WebSocket：瀏覽器透過JavaScript 向伺服器發出建立WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以透過TCP 連接直接交換資料。

設定WebSocket請求頭訊息，伺服器支援就可以進行。

Origin: http://example.com //根据域名是否在白名单内来判断是否可以通信 缺點： 實現成本高。

五、CORS

cors是跨域資源分享。現CORS通訊的關鍵是伺服器。只要伺服器實作了CORS接口，就可以跨源通訊。

缺點： 伺服器配置，佔用主網域頻寬。

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的 JavaScript影片教學 專欄！