HTML5 Access-Control-Allow-Origin解決跨域問題，html5教程

HTML5 Access-Control-Allow-Origin解決跨域問題，html5教程

跨域請求：

A.abc.com 發起一個到 abc.com/B 的ajax請求，也會有跨域的問題。之所以會有跨域問題，實則是因為www.abc.com其實同A.abc.com一樣，也是一個次層網域，而非頂層網域（頂層網域是http://abc.com）。

對於是否允許跨域，更詳細的說明可以看下錶：

URL	說明	是否允許通訊
http://www.a.com/a.jshttp://www.a.com/b.js	同一網域名稱下	允許
http://www.a.com/lab/a.jshttp://www.a.com/script/b.js	同一網域名稱下不同檔案夾	允許
http://www.a.com:8000/a.jshttp://www.a.com/b.js	同一網域名稱，不同連接埠	不允許
http://www.a.com/a.jshttps://www.a.com/b.js	同一網域名稱，不同協議	不允許
http://www.a.com/a.jshttp://170.32.82.74/b.js	網域名稱和網域名稱對應ip	不允許
http://www.a.com/a.jshttp://script.a.com/b.js	同一網域名稱，不同次層網域	不允許
http://www.a.com/a.jshttp://a.com/b.js	次層網域和頂層網域	不允許（cookie這種情況下也不允許訪問）
http://www.b.com/a.jshttp://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請求查看面板中可以看到，類似如下：

需要注意的是：

添加回應標頭responese headers時，允許跨域請求的網域名稱帶不帶斜杠/還是有區別的，帶斜杠/會報錯：
XMLHttpRequest cannot load  abc.com/B. The 'Access-Control-Allow-Origin' header has a value 'http://A.abc.org/' thatis 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，可以作為一種跨域請求以及響應的解決方案。

Cross-Origin Resource Sharing 詳細解釋及更多的回應標頭responese headers聲明：

w3:http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html
firefox:https://developer.mozilla.org/En/HTTP_access_control
ie10:http://blogs.msdn.com/b/ie_cn/archive/2012/02/14/ie10-cors-for-xhr.aspx

附：

禁用chrome本地安全性原則,不用配伺服器環境也能發起ajax請求：
chrome 案頭快速鍵 右鍵屬性 在捷徑標籤下的“目標”框中加入 --disable-web-security，重啟瀏覽器即可。

參考文章：

http://www.cnblogs.com/MyRobotDream/p/3543402.html

http://www.php1.cn/article/8354.html

http://huaidan.org/archives/2729.html