跨域的幾種解決方案

跨域是web開發中經常會遇到的情況，只出現在瀏覽器端。本文列舉了一些常見的跨域情況，和解決方案。

什麼是跨域，為什麼會有跨域？

首先什麼是跨域，簡單地理解就是因為JavaScript同源策略的限制。
如 a.com 下的js 無法和b.com 的js通訊。這是瀏覽器為了安全而設定的策略

只有域名相同才不會有跨域的情況。

以下情況都會出現跨域：
a.com 和 b.com 不同域名
www.a.com 和 a.com 不同二級域名
a.com 和 a.com:3000 不同埠
http://a.com 和 https://a.com 不同協議
app.a.com 和 pc.a.com 不同二級域名

以上可見 只有域名嚴格一致才不會出現跨域

特別注意兩點：
第一，如果是協議和埠造成的跨域問題“前臺”是無能為力的，只能通過後臺代理。這裡不細說。

第二：在跨域問題上，域僅僅是通過“URL的首部”來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。"URL的首部" 指 https:// (協議）www.myweb.com(域名) :8080(埠)

常見的情況和解決方案

1.jsonp 跨域訪問介面

// 在a.com下
$.ajax({
    url: 'b.com/getjson'?cb=?$a=1&b=2, // cb=? jquery的jsonp 會把此處的？
    type: 'jsonp',                     //替換為jsonpCallback
    jsonpCallback:'jsonpCallback',  // 發出的請求為b.com/getjson'?cb=jsonpCallback$a=1&b=2
    success:function(data){
        console.log(data)
    }
})

jsonp的原理：
雖然js是受到同源策略，但是引用js檔案，img，css檔案是不會受到限制的。聰明的你此時是否已經知道了答案。

沒錯原理就是動態建立script。jquery在發請求前生產了一個jsonpCallback函式。然後向b.com請求了一個js檔案
伺服器根據cb的值返回一個jsonpCallback(jsonDate);即這個js檔案被瀏覽器解析後執行了之前定義的函式。

這種方法非常常見，方便好用。
缺點是
1.需要後端配合提供jsonp介面。
2.因為是動態建立script標籤，所以只能get，不能post。 安全性要大大低於post，不適合傳送機密資訊。

2.document.domain+iframe的設定

對於主域相同而子域不同的例子
如在a.com 頁面裡有一個 pc.a.com 的iframe
我們只要在2個頁面裡都設定 document.domain = 'a.com';
程式碼如下：

var ifr = document.createElement('iframe');
ifr.src = 'http://pc.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在這裡操縱b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

這種方式適用於{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何頁面相互通訊

注意：
0、document.domain 不能改變主域。a.com 不能設為b.com 。
1、安全性，當一個站點（b.a.com）被攻擊後，另一個站點（c.a.com）會引起安全漏洞。
2、如果一個頁面中引入多個iframe，要想能夠操作所有iframe，必須都得設定相同domain。

3、利用iframe和location.hash

1、a.com a頁面 監聽自己的hashchange
2、a頁面中的ifame b.com下的b頁面 改變parent的hash
3、b.com 不能直接改變a.com 的hash時 需要引入a.com 中的c頁面#mydata
4、因為c頁面和a頁面同源 所以c頁面可以
parent.parent.location.hash = self.location.hash.substring(1);
來改變a頁面的hash
ok

4、window.name實現的跨域資料傳輸

function crossDomainPost() {
    // Add the iframe with a unique name
    var iframe = document.createElement("iframe");
    var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
    document.body.appendChild(iframe);
    iframe.style.display = "none";
    iframe.contentWindow.name = uniqueString;

    // construct a form with hidden inputs, targeting the iframe
    var form = document.createElement("form");
    form.target = uniqueString;
    form.action = "http://INSERT_YOUR_URL_HERE";
    form.method = "POST";

    // repeat for each parameter
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
    input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
    form.appendChild(input);

    document.body.appendChild(form);
    form.submit();
}

5、使用HTML5 postMessage

Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+都支援這個功能

otherWindow.postMessage(message, targetOrigin);
otherWindow: 對接收資訊頁面的window的引用。可以是頁面中iframe的contentWindow屬性；window.open的返回值；通過name或下標從window.frames取到的值。
message: 所要傳送的資料，string型別。
targetOrigin: 用於限制otherWindow，“*”表示不作限制

a.com/index.html中的程式碼：
<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com';  // 若寫成'http://b.com/c/proxy.html'效果一樣
                                        // 若寫成'http://c.com'就不會執行postMessage了
    ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

b.com/index.html中的程式碼：

<script type="text/javascript">
    window.addEventListener('message', function(event){
        // 通過origin屬性判斷訊息來源地址
        if (event.origin == 'http://a.com') {
            alert(event.data);    // 彈出"I was there!"
            alert(event.source);  // 對a.com、index.html中window物件的引用
                                  // 但由於同源策略，這裡event.source不可以訪問window物件
        }
    }, false);
</script>

6、利用flash