跨域問題的直接原因是瀏覽器存在同源策略，瀏覽器同源指的是：兩個頁面的協議、端口和主機相同，則兩個頁面具有相同的源。IE下滿足協議、主機相同，就認為是同源。

想象一下，如果沒有同源策略，誰都可以修改你站點上的內容，讀取你的cookie，後果難以想象

前端跨域的幾種方式

修改document.domain

document.domain 用來獲取當前網頁的域名，document.domain可以被賦值

document.domain只能修改成當前域名的主域名或者基礎域名，如當前域名是b.360.cn，那麽document.domain只能改成主域名www.360.cn或者基礎域名360.cn，改為其它值會提示“參數無效”

如 a.360.cn/x.html 和 b.360.cn/y.html 都將document.domain 改為360.cn 後，兩個頁面就可以跨域通信了

前提條件：兩個域名必須屬於同一個基礎域名且協議端口一致

隱患：當a.360.cn 遭到攻擊後，b.360.cn會有安全隱患

動態創建script

script 不受同源策略限制，在a.360.cn頁面中引入b.360.cn的js文件，就可以操作a.360.cn下的cookie、DOM等

通過location.hash傳參

a、b、c三個頁面，a、c頁面同源，b是需要跨域的頁面，a頁面創建一個iframe指向b頁面，b頁面根據parent.location.hash 的值去做相應的操作，操作完成後修改parent.location.hash 的值告訴a，a監聽自己的hash變化，IE、chrome下，b頁面無法直接修改parent.location.hash，需要借助與a同源的c頁面，具體做法是，b頁面創建iframe指向c頁面，b頁面改變自己的hash，c頁面讀取b頁面的parent.location.hash去修改a頁面的hash，a、c頁面同源，c頁面可以修改a頁面的hash，即parent.parent.location.hash

通過window.name傳參

a、b、c三個頁面，a、c頁面同源，b是需要跨域的頁面，a頁面創建iframe指向b頁面，b頁面將數據賦值給window.name，接著修改iframe的src指向c頁面，a、c頁面同源，參考document.domain方法取得c頁面window.name的值，為了安全，獲取數據後銷毀iframe

POSTMessage

a、b兩個頁面分別屬於http://a.360.cn和http://b.360.cn，兩個頁面通信

// a.360.cn/a.html內容
<iframe id="iFr" src="b.360.cn/b.html"></iframe
 
>
var iFrame = document.getElementById(‘iFr‘);
var targetOrigin = ‘http://b.360.cn/b.html‘;

iFrame.contentWindow.postMessage(‘message from http://a.360.cn‘, targetOrigin);

// b.360.cn/b.html內容
window.addEventListener(‘message‘, function(event){
    // 安全起見，必須驗證消息來源
    if(event.origin === ‘http://a.360.cn‘){
        alert(event.data); // ‘message from http://a.360.cn‘
    }
})

JSONP

動態創建script標簽加載數據，前端將回調函數名傳給服務端，服務端返回回調函數，函數參數是請求過來的數據，將返回值插入頁面會自動執行

1）安全問題

2）要確定jsonp請求是否成功並不容易

前端跨域幾種方式