跨域的解決方式

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

非同源限制：

1. cookie、localStorage、indexDB沒法讀取。
2. DOM沒法獲取。
3. AJAX請求沒法發送。

解決方式：

1、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)
}

注意：
一、查詢的Url中callback須要指定回調函數的名字。
二、<script>在瀏覽器做爲代碼運行，定義的getData函數會被當即調用。
三、返回的JSON參數做爲javascript對象，不是字符串，不須要進行JSON轉換。
四、jquery庫的 $.getJSON()也能夠實現。

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

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

2、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有三個屬性：
一、event.source：發送消息的窗口
二、event.origin: 消息發向的網址
三、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>

3、iframe

iframe載入頁面和src裏面的目標域是同一個域，是可以發起ajax請求（父子窗口）。 //前提是同源，不一樣源就不能夠發起ajax請求。

不一樣窗口同源之間是能夠獲取window對象，可是不能獲取window對象的屬性和方法。 //不一樣源會報錯

一、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>

缺陷：主域名得一致。

二、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>

缺陷：兼容性很差

三、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，長度也有限制。

4、WebSocket

WebSocket：瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。

設置WebSocket請求頭信息，服務器支持就能夠進行。

Origin: http://example.com        //根據域名是否在白名單內來判斷是否能夠通訊

缺點：實現成本高。

5、CORS

cors是跨域資源分享。現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

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