跨域是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>
