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

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

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

非同源限制：

cookie、localStorage、indexDB無法讀取。

DOM無法取得。

AJAX請求無法傳送。

解決方式：

一、JSONP

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

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、<script>在瀏覽器作為程式碼運行，定義的getData函數會被立即呼叫。 <br/>3、傳回的JSON參數作為javascript對象，不是字串，不需要進行JSON轉換。 <br/>4、jquery函式庫的 $.getJSON()也可以實作。 </script>

$.getJSON("https://segmentfault.com/data?callback=?", function(data) {
    console.log(data)
})

缺陷：是GET方式獲取，不支援 POST。

二、window.postMessage

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

页面一："https://www.segmentfault.com/page1.html"    //传递页面
<script>
    window.onload = function () {
        if (typeof window.postMessage === undefined) {
            alert("浏览器不支持postMessage！");
        } else {
            window.open.postMessage({data: "Hello World"}, "https://www.example.com/page2.html");
        }
    }
</script>

页面二："https://www.example.com/page2.html"    //接收页面
<script>
    window.addEventListener(&#39;message&#39;, function(e) {
        console.log(e.data);
    },false);
</script>

事件接收window.addEventListener('message', function(){});中的message事件物件event有三個屬性：
1、event.source：傳送訊息的視窗
2、event.origin: 訊息發送的網址
3、event.data: 訊息內容

<script>
    //引用父窗口发送信息给下一个窗口
    window.addEventListener(&#39;message&#39;, receiveMessage);
    function receiveMessage(event) {
      event.source.postMessage(&#39;Nice to see you!&#39;, &#39;*&#39;);
    }
</script>

<script>
    //过滤不是发给本窗口的信息
    window.addEventListener(&#39;message&#39;, receiveMessage);
    function receiveMessage(event) {
      if (event.origin !== &#39;http://www.segmentfault.com/page1.html&#39;) return;
      if (event.data === &#39;Hello World&#39;) {
          event.source.postMessage(&#39;Hello&#39;, event.origin);
      } else {
        console.log(event.data);
      }
    }
</script>

三、iframe

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

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

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

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

页面一："https://segmentfault.com/page1.html"
<script>
    window.onload = function() {
        document.domain = "https://segmentfault.com/";        //设置domain
        window.getData = function() {
            //ajax请求
        }
    }
</script>

页面二："https://segmentfault.com/page2.html"
<iframe></iframe>
<script>
    //动态创建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() {})
    }
</script>

缺陷：主網域得一致。

2、window.name iframe（非同源可用）

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

页面一："https://segmentfault.com/page1.html"
<script>
    window.name = "this is data!"
</script>

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

缺陷：相容性不好

3、location.hash iframe（非同源可用）

##片段標識符：片段標識符是指url#號後面的部分。只是改變片段標識符頁面不刷新。

页面一："https://www.segmentfault.com/page1.html"
<script>  
    function startRequest(){
        var ifr = document.createElement(&#39;iframe&#39;);
        ifr.style.display = &#39;none&#39;;
        ifr.src = &#39;https://www.example.com/page2.html#messgae&#39;;
        document.body.appendChild(ifr);
    }
    
    function checkHash() {
        var data = location.hash ? location.hash.substring(1) : &#39;&#39;;
    }
    setInterval(checkHash, 2000);
</script>

页面二："https://www.example.com/page2.html#messgae"
<script>
    function callBack(){
        try {
            parent.location.hash = &#39;somedata&#39;;
        } catch (e) {
            // ie、chrome的安全机制无法修改parent.location.hash，
            // 所以要利用一个中间的example域下的代理iframe
            var ifrproxy = document.createElement(&#39;iframe&#39;);
            ifrproxy.style.display = &#39;none&#39;;
            ifrproxy.src = &#39;https:/www.segmentfault.com/page3html#somedata&#39;;    // 注意该文件在"segmentfault.com"域下
            document.body.appendChild(ifrproxy);
        }
    }
</script>

页面三："ttps:/www.segmentfault.com/page3html#somedata"
<script>
    //因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
    parent.parent.location.hash = self.location.hash.substring(1);
</script>

缺點：資料暴露在url，長度也有限制。

四、WebSocket

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

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

Origin: http://example.com        //根据域名是否在白名单内来判断是否可以通信

缺點：

實現成本高。

五、CORS

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

缺點：

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

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的

JavaScript影片教學專欄！

以上是JavaScript跨域的解決方式總結（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！