跨域是web開(kāi)發(fā)中經(jīng)常會(huì)遇到的情況赊堪，只出現(xiàn)在瀏覽器端。本文列舉了一些常見(jiàn)的跨域情況竖哩，和解決方案哭廉。
什么是跨域，為什么會(huì)有跨域相叁？
首先什么是跨域遵绰，簡(jiǎn)單地理解就是因?yàn)镴avaScript同源策略的限制。
如 a.com 下的js 無(wú)法和b.com 的js通信增淹。這是瀏覽器為了安全而設(shè)定的策略
只有域名相同才不會(huì)有跨域的情況街立。
以下情況都會(huì)出現(xiàn)跨域：
a.com 和 b.com 不同域名
www.a.com 和 a.com 不同二級(jí)域名
a.com 和 a.com:3000 不同端口
http://a.com 和 https://a.com 不同協(xié)議
app.a.com 和 pc.a.com 不同二級(jí)域名
以上可見(jiàn) 只有域名嚴(yán)格一致才不會(huì)出現(xiàn)跨域
特別注意兩點(diǎn)：
第一，如果是協(xié)議和端口造成的跨域問(wèn)題“前臺(tái)”是無(wú)能為力的埠通，只能通過(guò)后臺(tái)代理。這里不細(xì)說(shuō)逛犹。
第二：在跨域問(wèn)題上端辱，域僅僅是通過(guò)“URL的首部”來(lái)識(shí)別而不會(huì)去嘗試判斷相同的ip地址對(duì)應(yīng)著兩個(gè)域或兩個(gè)域是否在同一個(gè)ip上。"URL的首部" 指 https:// (協(xié)議）www.myweb.com(域名) :8080(端口)
常見(jiàn)的情況和解決方案
1.jsonp 跨域訪問(wèn)接口
// 在a.com下
$.ajax({
url: 'b.com/getjson'?cb=?$a=1&b=2, // cb=? jquery的jsonp 會(huì)把此處的虽画？
type: 'jsonp', //替換為jsonpCallback
jsonpCallback:'jsonpCallback', // 發(fā)出的請(qǐng)求為b.com/getjson'?cb=jsonpCallback$a=1&b=2
success:function(data){
console.log(data)
}
})
jsonp的原理：
雖然js是受到同源策略舞蔽，但是引用js文件，img码撰，css文件是不會(huì)受到限制的渗柿。聰明的你此時(shí)是否已經(jīng)知道了答案。
沒(méi)錯(cuò)原理就是動(dòng)態(tài)創(chuàng)建script脖岛。jquery在發(fā)請(qǐng)求前生產(chǎn)了一個(gè)jsonpCallback函數(shù)朵栖。然后向b.com請(qǐng)求了一個(gè)js文件
服務(wù)器根據(jù)cb的值返回一個(gè)jsonpCallback(jsonDate);即這個(gè)js文件被瀏覽器解析后執(zhí)行了之前定義的函數(shù)。
這種方法非常常見(jiàn)柴梆，方便好用陨溅。
缺點(diǎn)是
1.需要后端配合提供jsonp接口。
2.因?yàn)槭莿?dòng)態(tài)創(chuàng)建script標(biāo)簽绍在，所以只能get门扇，不能post雹有。 安全性要大大低于post，不適合發(fā)送機(jī)密信息臼寄。
2.document.domain+iframe的設(shè)置
對(duì)于主域相同而子域不同的例子
如在a.com 頁(yè)面里有一個(gè) pc.a.com 的iframe
我們只要在2個(gè)頁(yè)面里都設(shè)置 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}中的任何頁(yè)面相互通信
注意：
0霸奕、document.domain 不能改變主域。a.com 不能設(shè)為b.com 吉拳。
1质帅、安全性，當(dāng)一個(gè)站點(diǎn)（b.a.com）被攻擊后合武，另一個(gè)站點(diǎn)（c.a.com）會(huì)引起安全漏洞临梗。
2、如果一個(gè)頁(yè)面中引入多個(gè)iframe稼跳，要想能夠操作所有iframe盟庞，必須都得設(shè)置相同domain。
3汤善、利用iframe和location.hash
1什猖、a.com a頁(yè)面 監(jiān)聽(tīng)自己的hashchange
2、a頁(yè)面中的ifame b.com下的b頁(yè)面 改變parent的hash
3红淡、b.com 不能直接改變a.com 的hash時(shí) 需要引入a.com 中的c頁(yè)面#mydata
4不狮、因?yàn)閏頁(yè)面和a頁(yè)面同源 所以c頁(yè)面可以
parent.parent.location.hash = self.location.hash.substring(1);
來(lái)改變a頁(yè)面的hash
ok
4、window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸
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+都支持這個(gè)功能
otherWindow.postMessage(message, targetOrigin);
otherWindow: 對(duì)接收信息頁(yè)面的window的引用⊥靶可以是頁(yè)面中iframe的contentWindow屬性驻仅；window.open的返回值；通過(guò)name或下標(biāo)從window.frames取到的值登渣。
message: 所要發(fā)送的數(shù)據(jù)噪服，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'就不會(huì)執(zhí)行postMessage了
ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>
b.com/index.html中的代碼：
<script type="text/javascript">
window.addEventListener('message', function(event){
// 通過(guò)origin屬性判斷消息來(lái)源地址
if (event.origin == 'http://a.com') {
alert(event.data); // 彈出"I was there!"
alert(event.source); // 對(duì)a.com粘优、index.html中window對(duì)象的引用
// 但由于同源策略，這里event.source不可以訪問(wèn)window對(duì)象
}
}, false);
</script>
