實現瀏覽器跨域解決方案介紹

本章節介紹一下如何實現瀏覽器跨域功能，首先介紹一下何種情況下屬於跨域，然後再介紹一下如何實現跨域。

需要的朋友可以做一下參考，下面進入正題。

一.跨域概念:

不同地址，不同埠，不同級別，不同協議都會構成跨域。

例如：antzone.softwhy.com和www.softwhy.com都會構成跨域。

總結起來只要協議、域名、埠有任何一個不同，都被當作是不同的域。

下面舉例，每兩個一組:

[JavaScript] 純文字檢視 複製程式碼
URL                      說明       是否允許通訊
http://www.softwhy.com/a.js
http://www.softwhy.com/b.js     同一域名下   允許
 
http://www.softwhy.com/lab/a.js
http://www.softwhy.com/script/b.js 同一域名下不同資料夾 允許
 
http://www.softwhy.com:8000/a.js
http://www.softwhy.com/b.js     同一域名，不同埠  不允許
 
http://www.softwhy.com/a.js
https://www.softwhy.com/b.js 同一域名，不同協議 不允許
 
http://www.softwhy.com/a.js
http://60.32.92.74/b.js 域名和域名對應ip 不允許
 
http://www.softwhy.com/a.js
http://about.softwhy.com/b.js 主域相同，子域不同 不允許
 
http://www.softwhy.com/a.js
http://softwhy.com/b.js 同一域名，不同二級域名（同上） 不允許（cookie這種情況下也不允許訪問）
 
http://www.hao123.com/a.js
http://www.softwhy.com/b.js 不同域名 不允許

二.解決跨域的方案:

使用window.postMessage可以實現跨域，具體可以參閱postMessage實現頁面通訊介紹一章節。

下面再來介紹幾種實現跨域的方式：

CORS跨域資源共享:

眾所周知，之前跨域很多時候用的是jsonp的方式，jsonp的方式我後面介紹。下面說說CORS跨域和jsonp跨域的優勢：

CORS與JSONP相比，無疑更為先進、方便和可靠。

（1）. JSONP只能實現GET請求，而CORS支援所有型別的HTTP請求。

（2）.使用CORS，開發者可以使用普通的XMLHttpRequest發起請求和獲得資料，比起JSONP有更好的錯誤處理。

（3）.JSONP主要被老的瀏覽器支援，它們往往不支援CORS，而絕大多數現代瀏覽器都已經支援了CORS。

特別說明:低版本IE7以下不支援，要支援IE7還是要用jsonp方式。

關於jsonp方式可以參閱JSONP用法詳解一章節。

CORS使用步驟如下:

1.首先來看前端:

純js的ajax請求:

[JavaScript] 純文字檢視 複製程式碼
//ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判斷。
var xhr = new XMLHttpRequest(); 
xhr.open("GET", "/antzone", true);
xhr.send();

以上的antzone是相對路徑，如果我們要使用CORS，相關Ajax程式碼可能如下所示：

[JavaScript] 純文字檢視 複製程式碼
//ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判斷。
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.softwhy.com/CORS", true);
xhr.send();

當然也可以用jquery的ajax進行。

2.後端或者伺服器端的配置:

下面主要介紹Apache和PHP裡的設定方法。

Apache：Apache需要使用mod_headers模組來啟用HTTP頭的設定，它預設是啟用的。

只需要在Apache配置檔案的 < Directory >, < Location>, < Files >或< VirtualHost>的配置里加入以下內容即可：

[PHP] 純文字檢視 複製程式碼
Header set Access-Control-Allow-Origin *

PHP：只需要使用如下的程式碼設定即可。

[JavaScript] 純文字檢視 複製程式碼
<?php  
 header("Access-Control-Allow-Origin:*");

以上的配置的含義是允許任何域發起的請求都可以獲取當前伺服器的資料。當然，這樣有很大的危險性，惡意站點可能通過XSS攻擊我們的伺服器。所以我們應該儘量有針對性的對限制安全的來源，例如下面的設定使得只有www.softwhy.com這個域才能跨域訪問伺服器的API。

[PHP] 純文字檢視 複製程式碼
Access-Control-Allow-Origin: http://www.softwhy.com

通過修改document.domain來跨子域:

只需要在跨域的兩個頁面中設定document.domain就可以了。修改document.domain的方法只適用於不同子域的框架間的互動。

例如：1.在頁面 http:// www.softwhy.com/a.html 中設定document.domain

[HTML] 純文字檢視 複製程式碼
<iframe id="iframe" src="http://softwhy.com/b.html"></iframe>
<script type="text/javascript">
document.domain = 'softwhy.com';//設定成主域
function test(){
  alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子視窗的 window 物件
}

2.在頁面http:// softwhy.com/b.html 中設定document.domain

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
//在iframe載入這個頁面也設定document.domain，使之與主頁面的document.domain相同
document.domain = 'softwhy.com';
</script>

使用window.name來進行跨域:

使用window.name進行跨域可以參閱使用window.name實現跨域功能一章節。