做Web開發(fā)經(jīng)常需要面對(duì)跨域問(wèn)題，跨域問(wèn)題的根源是瀏覽器安全中的同源策略，比如說(shuō)，對(duì)于http://www.a.com/1.html來(lái)說(shuō)：

1.http://www.a.com/2.html是同源的；
2.https://www.a.com/2.html是不同源的，原因是協(xié)議不同；
3.http://www.a.com:8080/2.html是不同源的，原因是端口不同；
4.http://sub.a.com/2.html是不同源的，原因是主機(jī)不同。

在瀏覽器中，<script>、<img>、<iframe>和<link>這幾個(gè)標(biāo)簽是可以加載跨域（非同源）的資源的，并且加載的方式其實(shí)相當(dāng)于一次普通的GET請(qǐng)求，唯一不同的是，為了安全起見，瀏覽器不允許這種方式下對(duì)加載到的資源的讀寫操作，而只能使用標(biāo)簽本身應(yīng)當(dāng)具備的能力（比如腳本執(zhí)行、樣式應(yīng)用等等）。

最常見的跨域問(wèn)題是Ajax跨域訪問(wèn)的問(wèn)題，默認(rèn)情況下，跨域的URL是無(wú)法通過(guò)Ajax訪問(wèn)的。這里我記錄我所了解到的跨域的方法：

1. 服務(wù)器端代理，這沒有什么可說(shuō)的，缺點(diǎn)在于，默認(rèn)情況下接收Ajax請(qǐng)求的服務(wù)端是無(wú)法獲取到的客戶端的IP和UA的。

2. iframe，使用iframe其實(shí)相當(dāng)于開了一個(gè)新的網(wǎng)頁(yè)，具體跨域的方法大致是，域A打開的母頁(yè)面嵌套一個(gè)指向域B的iframe，然后提交數(shù)據(jù)，完成之后，B的服務(wù)端可以：

●返回一個(gè)302重定向響應(yīng)，把結(jié)果重新指回A域；
●在此iframe內(nèi)部再嵌套一個(gè)指向A域的iframe。

這兩者都最終實(shí)現(xiàn)了跨域的調(diào)用，這個(gè)方法功能上要比下面介紹到的JSONP更強(qiáng)，因?yàn)榭缬蛲戤呏驞OM操作和互相之間的JavaScript調(diào)用都是沒有問(wèn)題的，但是也有一些限制，比如結(jié)果要以URL參數(shù)傳遞，這就意味著在結(jié)果數(shù)據(jù)量很大的時(shí)候需要分割傳遞，甚是麻煩；還有一個(gè)麻煩是iframe本身帶來(lái)的，母頁(yè)面和iframe本身的交互本身就有安全性限制。

3. 利用script標(biāo)簽跨域，這個(gè)辦法也很常見，script標(biāo)簽是可以加載異域的JavaScript并執(zhí)行的，通過(guò)預(yù)先設(shè)定好的callback函數(shù)來(lái)實(shí)現(xiàn)和母頁(yè)面的交互。它有一個(gè)大名，叫做JSONP跨域，JSONP是JSON with Padding的略稱。它是一個(gè)非官方的協(xié)議，明明是加載script，為啥和JSON扯上關(guān)系呢？原來(lái)就是這個(gè)callback函數(shù)，對(duì)它的使用有一個(gè)典型的方式，就是通過(guò)JSON來(lái)傳參，即將JSON數(shù)據(jù)填充進(jìn)回調(diào)函數(shù)，這就是JSONP的JSON+Padding的含義。

在互聯(lián)網(wǎng)上有很多JSONP的服務(wù)來(lái)提供數(shù)據(jù)，本質(zhì)上就是跨域請(qǐng)求，并且在請(qǐng)求URL中指定好callback，比如callback=result，那么在獲取到這些數(shù)據(jù)以后，就會(huì)自動(dòng)調(diào)用result函數(shù)，并且把這些數(shù)據(jù)以JSON的形式傳進(jìn)去，例如（搜索“football”）：

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=result

使用JQuery來(lái)調(diào)用就寫成：
復(fù)制代碼 代碼如下:
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=?",function(data){
    //...
});

總的來(lái)說(shuō)，JSONP的跨域方式的局限性在于，只能使用GET請(qǐng)求，并且不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題。

4. Flash跨域：

它會(huì)訪問(wèn)目標(biāo)網(wǎng)站根目錄下面的crossdomain.xml文件，根據(jù)文件中的內(nèi)容來(lái)確定是否允許此次跨域訪問(wèn)：
復(fù)制代碼 代碼如下:
<cross-domain-policy>
    <allow-access-from domain="xxx.xxx.com" />
</cross-domain-policy>

5. img標(biāo)簽也可以使用，這也是一種非常常見的方法，功能上面弱一點(diǎn)，只能發(fā)送一個(gè)get請(qǐng)求，沒有什么回調(diào)，Google的點(diǎn)擊計(jì)數(shù)就是這樣確定的。

6. window.PostMessage，這個(gè)算是HTML5新加入的為跨域通訊考慮的機(jī)制，只有Firefox 3、Safari 4和IE8及之后的版本支持。使用它向其它窗口發(fā)送消息的調(diào)用方式如下：
復(fù)制代碼 代碼如下:
otherWindow.postMessage(message, targetOrigin);

在接收的窗口，需要設(shè)置一個(gè)事件處理函數(shù)來(lái)接收發(fā)過(guò)來(lái)的消息：
復(fù)制代碼 代碼如下:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
    if (event.origin !== "http://example.org:8080")
        return;
}

注意這里必需要使用消息的origin和source屬性來(lái)驗(yàn)證發(fā)送者的身份，否則會(huì)造成XSS漏洞。

7. Access Control

有一些瀏覽器支持Access-Control-Allow-Origin這樣的響應(yīng)頭，比如：
復(fù)制代碼 代碼如下:
header("Access-Control-Allow-Origin: http://www.a.com");

就指定了允許對(duì)www.a.com跨域訪問(wèn)。

8. window.name

這個(gè)東西其實(shí)以前被用作黑客XSS的手段，其本質(zhì)是，當(dāng)window的location變化的時(shí)候，頁(yè)面會(huì)重新加載，但是有趣的是，這個(gè)window.name居然不發(fā)生變化，那么就可以用它來(lái)傳值了。配合iframe，改變幾次iframe的window對(duì)象，就完成了實(shí)用的跨域數(shù)據(jù)傳遞。

9. document.domain

這個(gè)方式適用于a.example.com和b.example.com這種跨域的通信，因?yàn)槎哂幸粋€(gè)共有的域，叫做example.com，只要設(shè)置document.domain為example.com就可以了，但是如果a.example1.com和b.example2.com之間要通信，它就沒辦法了。

10. Fragment Identitier Messaging（FIM）

這個(gè)方法很有意思，也需要iframe的配合。Fragment Identitier就是URL的井號(hào)（#）后面的經(jīng)常用于錨點(diǎn)定位的部分，這部分的改變不會(huì)導(dǎo)致頁(yè)面刷新，母窗口可以隨便訪問(wèn)iframe的URL，而iframe也可以隨便訪問(wèn)母窗口的URL，那這二者之間就可以通過(guò)改變Fragmement Identitier來(lái)實(shí)現(xiàn)通信了。缺點(diǎn)是Fragmement Identitier的改變會(huì)產(chǎn)生不必要的歷史記錄，而且也有長(zhǎng)度限制；另外，有的瀏覽器不支持onhashchange事件。

11. Cross Frame（CF）

這種方法是上述FIM方法的變種，CF和FIM的本質(zhì)其實(shí)在我的《GWT初體驗(yàn)》這篇文章里面都有介紹（只不過(guò)是被用來(lái)實(shí)現(xiàn)歷史和后退功能了），它會(huì)動(dòng)態(tài)創(chuàng)建一個(gè)不可見的iframe，指向異域，處理完以后，這個(gè)iframe的URL中的Fragment Identitier包含了處理結(jié)果，供母頁(yè)面訪問(wèn)，而瀏覽器的URL沒有任何變化。

12. Cookie+P3P協(xié)議

利用P3P協(xié)議下跨域訪問(wèn)Cookie的特性，來(lái)實(shí)現(xiàn)跨域訪問(wèn)，也算一奇招。P3P是W3C公布的一項(xiàng)隱私保護(hù)推薦標(biāo)準(zhǔn)，旨在為網(wǎng)上沖浪的InterNET用戶提供隱私保護(hù)。把Cookie的path設(shè)置為“/”，即沒有任何域的限制，這個(gè)時(shí)候有的瀏覽器下面允許別的URL的頁(yè)面來(lái)讀取，有的則不允許，這種情況下需要在母頁(yè)面響應(yīng)的頭上面設(shè)置P3P的頭：
復(fù)制代碼 代碼如下:
P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"

JavaScript技術(shù)：JavaScript跨域方法匯總，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。