摘要：跨域概述兩個(gè)不同域互相請求，稱為跨域，是由瀏覽器同源策略限制的一類請求場景。同源策略限制以下幾種行為和無法讀取無法獲得請求不能發(fā)送目前主流的用于解決跨域問題的方法跨域缺點(diǎn)這種方法只適用于和窗口，和無法通過這種方法。

兩個(gè)不同域互相請求，稱為跨域，是由瀏覽器同源策略限制的一類請求場景。

--> 同源策略/SOP（Same origin policy）是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到CSFR等攻擊。所謂同源是指"協(xié)議+域名+端口"三者相同。

同源策略限制以下幾種行為：
1.) Cookie、LocalStorage 和 IndexDB 無法讀取

2.) DOM無法獲得

3.) AJAX 請求不能發(fā)送

目前主流的用于解決跨域問題的方法：

缺點(diǎn)：這種方法只適用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 無法通過這種方法。

實(shí)現(xiàn)原理：兩個(gè)頁面都通過js強(qiáng)制設(shè)置document.domain為基礎(chǔ)主域，就實(shí)現(xiàn)了同域。

1.）父窗口：(http://www.domain.com/a.html)

2.）子窗口：(http://child.domain.com/b.html)

-->iframe是什么？iframe 元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：

a.） 頁面和其打開的新窗口的數(shù)據(jù)傳遞

b.） 多窗口之間消息傳遞

c.） 頁面與嵌套的iframe消息傳遞

d.） 上面三個(gè)場景的跨域數(shù)據(jù)傳遞

用法：postMessage(data,origin)方法接受兩個(gè)參數(shù)

data： html5規(guī)范支持任意基本類型或可復(fù)制的對象，但部分瀏覽器只支持字符串，所以傳參時(shí)最好用JSON.stringify()序列化。

origin： 協(xié)議+主機(jī)+端口號，也可以設(shè)置為*，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

1.）a.html：(http://www.domain1.com/a.html)

2.）b.html：(http://www.domain2.com/b.html)

window.name屬性的獨(dú)特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB）。

1.）a.html：(http://www.domain1.com/a.html)

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement("iframe");

    // 加載跨域頁面
    iframe.src = url;

    // onload事件會(huì)觸發(fā)2次，第1次加載跨域頁，并留存數(shù)據(jù)于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy頁)成功后，讀取同域window.name中數(shù)據(jù)
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域頁)成功后，切換到同域代理頁面
            iframe.contentWindow.location = "http://www.domain1.com/proxy.html";
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 獲取數(shù)據(jù)以后銷毀這個(gè)iframe，釋放內(nèi)存；這也保證了安全（不被其他域frame js訪問）
    function destoryFrame() {
        iframe.contentWindow.document.write("");
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 請求跨域b頁面數(shù)據(jù)
proxy("http://www.domain2.com/b.html", function(data){
    alert(data);
});

2.）proxy.html：(http://www.domain1.com/proxy....
中間代理頁，與a.html同域，內(nèi)容為空即可。

3.）b.html：(http://www.domain2.com/b.html)

總結(jié)：通過iframe的src屬性由外域轉(zhuǎn)向本地域，跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。這個(gè)就巧妙地繞過了瀏覽器的跨域訪問限制，但同時(shí)它又是安全操作。

本質(zhì)是創(chuàng)建本地服務(wù)器，由本地服務(wù)器請求跨域服務(wù)器上的數(shù)據(jù)，服務(wù)器之間沒有同源限制，

在被請求的文件中添加一個(gè)header(IE10以下不支持)

缺點(diǎn)：只能實(shí)現(xiàn)get一種請求。
優(yōu)點(diǎn)：簡單適用，老式瀏覽器全部支持，服務(wù)器改造非常小。

原理：網(wǎng)頁通過添加一個(gè)