HTML5解決跨域問題

html5解決跨域問題

由於瀏覽器的同源策略，網路連線的跨域訪問是不被允許的，xhr物件不能直接與非同源的**處理資料互動。而同源指的是什麼呢？同源的範疇包括：規則(協議)，主機號(網域名稱、ip等)，埠號。

但是隨著開放，共享平台的流行，跨域訪問的需求愈加強烈。目前最常用的跨域方案是動態加入script標籤，這多少有點hack的意味，跨域訪問似乎一直沒有什麼安全且光明正大的辦法。

終於，html5提供的xmlhttprequest level2實現了跨域訪問以及其他的一些新功能。下面我們會詳細討論一下：

xhr2是html5新特性中的乙個(事實上沒有什麼xhr1，xhr2這樣的概念，xhr2只是html5提供的一套新的規範)，在原有xhr物件上新增了一些功能：跨域訪問，全新的事件，還有請求進度以及響應進度。

目前瀏覽器對於xhr2的相容列表：

原理：正常情況下，我們書寫乙個xhr示例：

xhr.open('get', '', true); //訪問baidu.com

xhr.send(null);

我們本地使用chrome執行這段**，開啟控制台檢視錯誤資訊：

圖1在這裡可以看到，本次請求已經被kill掉。這是因為，我們的頁面在本地，域是與請求的非同源。

那麼本次請求是何時被kill的呢，是在發出前被瀏覽器確認為跨域請求而被立即終止了嗎？事實上，瀏覽器不僅發出了請求，還接收到了響應。然後根據響應頭的規則來確定這個域是否同源可以接收，如果不可以，瀏覽器就會報錯，接收到的資料也不會提供給指令碼。

我們回到xhr2，上面提到，xhr物件新增了一些功能，這裡就包括跨域訪問。實現如下：

//在伺服器端返回內容的頁面，設定header access-control-allow-origin如下

response.addheader("access-control-allow-origin","*") ;

這裡，我們先不討論設定的含義，先讓**跑起來，檢視結果如何。

頁面已經完成如上配置，修改js**如下：

xhr.open('get', '', true); //訪問baidu.com

xhr.send();

重新整理頁面，檢視控制台，沒有報錯。開啟控制台的「network」選型卡：

圖2可以看到紅線標識的部分：access-control-allow-origin:*，即為我們在伺服器端所做的設定。切換到「response」選項卡：

圖3可以看到伺服器返回的內容，如此，我們完成了跨域訪問。

這是怎麼做到的呢？

瀏覽器在接收到伺服器返回資訊時，會檢查響應頭的access-control-allow-origin，它的值標識請求內容所允許的域。

我們之前要求伺服器設定access-control-allow-origin為*，表明該返回資訊允許所有源訪問。如果設定為具體的域，如就表明除了同源外，只允許域來自niweisuo.com的訪問。

注：在使用ajax類庫時，可能經過如上的設定，依然無法通過瀏覽器的安全限制。那麼，可以檢查一下ajax類庫的**，看是否存在影響跨域設定的**：

圖4如上是tangram-ajax-1.5.2.js中，影響跨域的**，注釋調即可，其他類庫請自調。