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,重啟瀏覽器即可


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM