如何解決JavaScript跨域的問題

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

同源政策：協(xié)議、域名、端口均相同。

非同源限制：

cookie、localStorage、indexDB無法讀取。

DOM無法獲取。

AJAX請求無法發(fā)送。

解決方式：

一、JSONP

原理：通過動(dòng)態(tài)添加一個(gè)<script>元素，向服務(wù)器請求JSON數(shù)據(jù)。服務(wù)器接收請求返回到指定具名回調(diào)函數(shù)。

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需要指定回調(diào)函數(shù)的名字。
2、<script>在瀏覽器作為代碼運(yùn)行，定義的getData函數(shù)會(huì)被立即調(diào)用。
3、返回的JSON參數(shù)作為javascript對象，不是字符串，不需要進(jìn)行JSON轉(zhuǎn)換。
4、jquery庫的 $.getJSON()也可以實(shí)現(xiàn)。

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

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

二、window.postMessage

window.postMessage 無論是否同源都允許跨窗口通信。 postMessage 參數(shù)一是傳遞內(nèi)容，參數(shù)二是協(xié)議+域名+端口或者（*表示不限制域名）

頁面一："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有三個(gè)屬性：
1、event.source：發(fā)送消息的窗口
2、event.origin: 消息發(fā)向的網(wǎng)址
3、event.data: 消息內(nèi)容

<script>
    //引用父窗口發(fā)送信息給下一個(gè)窗口
    window.addEventListener('message', receiveMessage);
    function receiveMessage(event) {
      event.source.postMessage('Nice to see you!', '*');
    }
</script>

<script>
    //過濾不是發(fā)給本窗口的信息
    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里面的目標(biāo)域是同一個(gè)域，是能夠發(fā)起ajax請求（父子窗口）。   //前提是同源，不同源就不可以發(fā)起ajax請求。

不同窗口同源之間是可以獲取window對象，但是不能獲取window對象的屬性和方法。   //不同源會(huì)報(bào)錯(cuò)

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

document.domain屬性：一級域名相同，二級域名不同可以實(shí)現(xiàn)window對象獲取。

頁面一："https://segmentfault.com/page1.html"
<script>
    window.onload = function() {
        document.domain = "https://segmentfault.com/";        //設(shè)置domain
        window.getData = function() {
            //ajax請求
        }
    }
</script>

頁面二："https://segmentfault.com/page2.html"
<iframe id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></iframe>
<script>
    //動(dòng)態(tài)創(chuàng)建iframe最佳，獲取完數(shù)據(jù)銷毀。
    //document.domain設(shè)置成自身或更高一級的父域，主域必須相同。
    document.domain = "https://segmentfault.com/"        //設(shè)置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屬性：在一個(gè)窗口的生命周期內(nèi)，無論是否同源，同一個(gè)窗口的載入頁面window.name屬性是共享的，每個(gè)頁面都可以操作。

頁面一："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>
    //動(dòng)態(tài)創(chuàng)建iframe最佳，獲取完數(shù)據(jù)銷毀。
    //獲取window.name
    function test() {
        var winName = document.getElementById("iframe").contentWindow.name;
        winName.src = "https://segmentfault.com/data.html";        //最后需要將iframe的src設(shè)置成當(dāng)前域的一個(gè)頁面地址
    }
</script>

缺陷：兼容性不好

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

片段標(biāo)識符：片段標(biāo)識符是指url#號后面的部分。只是改變片段標(biāo)識符頁面不刷新。

頁面一："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的安全機(jī)制無法修改parent.location.hash，
            // 所以要利用一個(gè)中間的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>
    //因?yàn)閜arent.parent和自身屬于同一個(gè)域，所以可以改變其location.hash的值
    parent.parent.location.hash = self.location.hash.substring(1);
</script>

缺點(diǎn)：數(shù)據(jù)暴露在url，長度也有限制。

四、WebSocket

WebSocket：瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。

設(shè)置WebSocket請求頭信息，服務(wù)器支持就可以進(jìn)行。

Origin: http://example.com        //根據(jù)域名是否在白名單內(nèi)來判斷是否可以通信

缺點(diǎn)：實(shí)現(xiàn)成本高。

五、CORS

cors是跨域資源分享?，F(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。

缺點(diǎn)：服務(wù)器配置，占用主域帶寬。

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