摘要：例外當(dāng)涉及到同源策略時，有兩個主要的例外授信范圍兩個相互之間高度互信的域名，如公司域名，不遵守同源策略的限制。端口未將端口號加入到同源策略的組成部分之中，因此和屬于同源并且不受任何限制。

原文鏈接：http://www.devsai.com/2016/11/24/talk-CORS/

1995年，同源政策由 Netscape 公司引入瀏覽器。為了防止某些文檔或腳本加載別的域下的未知內(nèi)容，防止造成泄露隱私，破壞系統(tǒng)等行為發(fā)生。

同源策略做了兩種限制:

不能通過ajax的方法或其他腳本中的請求去訪問不同源中的文檔。

瀏覽器中不同域的框架之間是不能進(jìn)行js的交互操作的。

現(xiàn)在所有的可支持javascript的瀏覽器都會使用這個策略。

URL的三部分完全相同時我們就可以稱其為同源,這三部分是: 協(xié)議，域名（主機(jī)名）和端口都相同。

當(dāng)涉及到同源策略時，Internet Explorer有兩個主要的例外

授信范圍（Trust Zones）：兩個相互之間高度互信的域名，如公司域名（corporate domains），不遵守同源策略的限制。

端口：IE未將端口號加入到同源策略的組成部分之中，因此 http://company.com:81/index.html 和http://company.com/index.html  屬于同源并且不受任何限制。

雖然同源策略很有必要，但有很多時候我們還是需要去請求其他域的數(shù)據(jù)，如：調(diào)用不同業(yè)務(wù)的數(shù)據(jù)，而不同業(yè)務(wù)已子域區(qū)分；又或者是第三方公用的數(shù)據(jù)接口等等

由于各種原因，我們需要通過各種方式來請求到不同域下的資源。

jsonp是通過可以發(fā)出跨域請求的script標(biāo)簽,使javascript能夠獲得跨域請求的數(shù)據(jù)，并調(diào)用數(shù)據(jù)。

先看個例子：
文件index.js :

alert(123);

頁面index.html:

...

...

當(dāng)加載頁面index.html后，出123內(nèi)容的彈窗。通過查看index.js的響應(yīng)體，會發(fā)現(xiàn)響應(yīng)內(nèi)容就是alert(123)。

所以，可以這么思考，只要是通過script標(biāo)簽請求到的內(nèi)容就會被當(dāng)做js代碼執(zhí)行。

是否可以在script中的地址src不請求js文件，而是請求服務(wù)端的接口（即使不在同源下的），那么返回的內(nèi)容就能獲得到，并且會當(dāng)成js代碼來執(zhí)行。（一般的script標(biāo)簽都會去請求js代碼文件）

再來看下正常的服務(wù)端獲取數(shù)據(jù)接口。

比如:有這么個接口/getUserInfo/001,通過ajax請求獲得此接口數(shù)據(jù){"data" : {"name" : "devsai",like:"everything"}}。
得到數(shù)據(jù)后在ajax中調(diào)用showUserInfo(data)來渲染頁面，data就是接口數(shù)據(jù)。

如果現(xiàn)在用script標(biāo)簽來請求數(shù)據(jù),那么同樣可以獲得數(shù)據(jù)，執(zhí)行返回到的內(nèi)容，因是json格式的數(shù)據(jù)，并不會報錯，但也并沒有卵用。獲得接口的數(shù)據(jù)肯定是想做些什么的。

再想想，正常ajax請求后的js執(zhí)行內(nèi)容showUserInfo(data),拿到數(shù)據(jù)后，調(diào)用了showUserInfo函數(shù)。

那么，用script標(biāo)簽來請求數(shù)據(jù)時，返回的內(nèi)容直接是showUserInfo(data)不就行了，但服務(wù)端又不知道我們到底要執(zhí)行哪個函數(shù)，即使事先約定了，但后面因某些事要改，那還得告訴服務(wù)端，太麻煩了。
如果知道要執(zhí)行什么函數(shù)就好了。

當(dāng)然，這是可以的，改造下接口，以參數(shù)的形式把函數(shù)名傳給服務(wù)端。

Response返回的內(nèi)容同樣需要改造

Response:
    showUserInfo({"data" : {"name" : "devsai",like:"everything"}})

這樣，通過jsonp，去跨域請求接口數(shù)據(jù)就完成了。
需要注意的是函數(shù)名需要掛在window下面，要不然會報函數(shù)名未定義。

例如在demo.devsai.com/index.html頁面里執(zhí)行如下內(nèi)容：

document.domain = "devsai.com";

執(zhí)行該語句后，可以成功通過devsai.com/index.html的同源檢測, 實現(xiàn)數(shù)據(jù)的通訊，
當(dāng)然document.domain不能隨意設(shè)置，只能設(shè)置成當(dāng)前域，或設(shè)置成當(dāng)前域的頂域。

document.domain常常被用于同站但不同域的情況，例如：www.devsai.com，下嵌入了iframe廣告頁面ad.devsai.com,想要實現(xiàn)兩頁面的通訊，就需要對兩個頁面都設(shè)置document.domain="devsai.com"。

window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權(quán)限，window.name是持久存在一個窗口載入過的所有頁面中的，并不會因新頁面的載入而進(jìn)行重置。

name只能是字符串。

頁面a.html中:

頁面b.html:

再來看看如何讓a.html頁面獲取數(shù)據(jù)

用data.html作為請求數(shù)據(jù)地址:

a.html：

...


...

當(dāng)訪問http://127.0.0.1:8080/static/index.html,便能獲得來自不同域下data.html中的數(shù)據(jù)。

也可以做的更完善些，動態(tài)的生成iframe請求數(shù)據(jù)，用完即毀。

....
// 傳入請求數(shù)據(jù)接口地址和回調(diào)函數(shù)
function requestData(url,successCB){
    var body = document.getElementsByTagName("body")[0];
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "getDataByWindowName");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("border", "0");
    iframe.setAttribute("style", "width: 0; height: 0; border: none;");
    iframe.setAttribute("src", url);
    body.appendChild(iframe);
    setTimeout(function(){//防止iframe.src在沒加載前就被替換
        iframe.onload = function(){
            var data = iframe.contentWindow.name;
            if(data){
                data = JSON.parse(data);//轉(zhuǎn)成 JSON
                successCB && successCB(data);
            }
            iframe.parentNode.removeChild(iframe);
        }
        iframe.src = "about:blank";
    }, 100);
}

//requestData("http://localhost:8080/static/data.html",showUserInfo);
...

這就是使用window.name來進(jìn)行跨域。

window.postMessage方法是html5的新特性之一，
可以使用它來向其它的window對象發(fā)送消息，不管這個window對象是屬于同源或不同源。

通過window.postMessage允許瀏覽器windows, tabs, and iFrames之間跨域通訊。

之前寫過一篇關(guān)于window.postMessage的，做了詳細(xì)的說明+演示頁面+演示代碼,去看看

例如一個網(wǎng)站上有各種不同的業(yè)務(wù)，不同的業(yè)務(wù)有其對應(yīng)的子域。

如：ad.devsai.com;upload.devsai.com;live.devsai.com，分別對應(yīng)廣告業(yè)務(wù)，上傳業(yè)務(wù)，直播業(yè)務(wù)。

想在www.devsai.com中做交互，或獲得數(shù)據(jù)，便會受跨域影響。

造成跨域的原因是因為請求數(shù)據(jù)的源不同，那只要請求的源一樣，便沒有跨域問題了。

這也是可以辦到的，只需要web服務(wù)做下代理，或稱之為地址映射。

拿Nginx舉例，需要在web服務(wù)上做如下配置：

...
lcaotion /ad {
    proxy_pass http://ad.devsai.com
}

location /upload {
    proxy_pass http://upload.devsai.com
}

location /live {
    proxy_pass http://live.devsai.com
}
...

然后就可以在以www.devsai.com/ad/的方式去調(diào)用廣告業(yè)務(wù)。

當(dāng)一個發(fā)起的請求地址與發(fā)起該請求本身所在的地址不在同源下時，稱該請求發(fā)起了一個跨域的HTTP請求。

有些的跨域請求是被允許的,

* GET
* POST
* HEAD

* application/x-www-form-urlencoded
* multipart/form-data
* text/plain

var xdr = new XDomainRequest(); 

xdr.open("get", "http://www.devsai.com/xdr");

xdr.send();

不能通過__ajax的方法__或__其他腳本中的請求__去訪問不同源中的文檔。

瀏覽器中不同域的框架之間是不能進(jìn)行js的交互操作的。