HTML5中Access-Control-Allow-Origin解決跨域問題

跨域在開發中一些是一個比較常見的問題雖然有json或者xml來解決，如今html5開始流行了，咱們能夠經過Access-Control-Allow-Origin解決跨域問題，下面一塊兒來看看。

A.abc.com 發起一個到 abc.com/B 的ajax請求，也會有跨域的問題。之因此會有跨域問題，實則是由於www.abc.com其實同A.abc.com同樣，也是一個二級域名，而非一級域名（一級域名是http://abc.com）

對因而否容許跨域，更詳細的說明能夠看下錶：

URL	說明	是否容許通訊
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	容許
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不一樣文件夾	容許
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不一樣端口	不容許
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不一樣協議	不容許
http://www.a.com/a.js http://170.32.82.74/b.js	域名和域名對應ip	不容許
http://www.a.com/a.js http://script.a.com/b.js	同一域名，不一樣二級域名	不容許
http://www.a.com/a.js http://a.com/b.js	二級域名和一級域名	不容許（cookie這種狀況下也不容許訪問）
http://www.b.com/a.js http://www.a.com/b.js	不一樣域名

有了對跨域的基本概念瞭解後，就可直接進入這篇文章的主題了。

贊助商連接
解決方法：

若在接收請求的服務端abc.com/B頁面用的是php語言，則在頁面中加入：

// 指定可信任的域名來接收響應信息，推薦
<?php  header('Access-Control-Allow-Origin:http://A.abc.com'); ?>
或加入

// 使用通配符 * ，表示當前服務端通話任何域名發起請求，不推薦
<?php header('Access-Control-Allow-Origin:*'); ?>
就這樣在服務端簡單加一句響應頭responese headers聲明，一個跨域請求就不會被瀏覽器的同源安全策略所阻止了！

用chrome調試工具Network ajax請求查看面板中能夠看到，相似以下截圖：cors

須要注意的是：

添加響應頭responese headers時，容許跨域請求的域名帶不帶斜槓/仍是有區別的，帶斜槓/會報錯：
XMLHttpRequest cannot load  abc.com/B. The 'Access-Control-Allow-Origin' header has a value 'http://A.abc.org/' that is not equal to the supplied origin. Origin 'http://A.abc.org' is therefore not allowed access.

header('Access-Control-Allow-Origin:*');是html5新增的一項標準功能，所以 IE10如下 版本的瀏覽器是不支持 的，所以，若是要求兼容IE9或更低版本的ie瀏覽器，會致使使用此種方式的跨域請求以及傳遞Cookie的計劃夭折，最終還得迴歸JSONP(目前主流的處理方式是使用JSONP，易於實現，兼容性好，可查的資料也不少。)

跨域解決後，若是還要操做Cookie，還得繼續補增響應頭：

<?php  header('Access-Control-Allow-Credentials:true'); ?>
須要將 XMLHttpRequest 對象的 withCredentials 屬性設置爲 true，JQuery1.5.1+ 就開始提供了相應的字段，使用方式以下：

$.ajax({
url:"B.abc.com",
xhrFields:{
withCredentials:true
},
crossDomain:true
});
哦也~ 收到 Cookie 了。

設置 withCredentials 爲 true 的請求中會包含 A.abc.com端的全部Cookie，這些Cookie仍然遵循同源策略，因此，你只能訪問其中和 abc.com/B同根域的Cookie，而沒法訪問其餘域的Cookie。

Access-Control-Allow-Origin實則是html5 Cross-Origin Resource Sharing實現的最重要的一點參數配置。
Cross-Origin Resource Sharing，跨域資源共享，簡稱 CORS，能夠做爲一種跨域請求以及響應的解決方案。

附：

禁用chrome本地安全策略,不用配服務器環境也能發起ajax請求：chrome 桌面快捷鍵 右鍵屬性 在快捷方式標籤下的「目標」框中加入 --disable-web-security，重啓瀏覽器便可