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

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

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

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

2.) DOM無法獲得

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

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

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

實現(xiàn)原理：兩個頁面都通過js強制設置document.domain為基礎主域，就實現(xiàn)了同域。

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

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

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

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

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

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

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

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

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

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

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

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

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

window.name屬性的獨特之處：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事件會觸發(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ù)以后銷毀這個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)

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

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

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

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

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