如何解決JavaScript跨域的問題

小編給大家分享一下如何解決JavaScript跨域的問題，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

同源政策：協議、域名、端口均相同。

非同源限制：

cookie、localStorage、indexDB無法讀取。

DOM無法獲取。

AJAX請求無法發送。

解決方式：

一、JSONP

原理：通過動態添加一個<script>元素，向服務器請求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、<script>在瀏覽器作為代碼運行，定義的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"    //傳遞頁面
<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('message', 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('message', receiveMessage);
    function receiveMessage(event) {
      event.source.postMessage('Nice to see you!', '*');
    }
</script>

<script>
    //過濾不是發給本窗口的信息
    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);
      }
    }
</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 id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></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 id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></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('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);
</script>

頁面二："https://www.example.com/page2.html#messgae"
<script>
    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);
        }
    }
</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是跨域資源分享?，FCORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。

缺點：服務器配置，占用主域帶寬。

看完了這篇文章，相信你對如何解決JavaScript跨域的問題有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！