當前位置：首頁 >

利用Access-Control-Allow-Origin响应头解决跨域请求

發布時間：2024/4/17 38 豆豆

生活随笔收集整理的這篇文章主要介紹了利用Access-Control-Allow-Origin响应头解决跨域请求小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

標簽：?cors 跨域請求 ACAO

2015-11-28 18:53?12103人閱讀?評論(0)?收藏?舉報 ?分類： web前端（5）??J2EE服務器（2）?

? ? ? ? ?傳統的跨域請求沒有好的解決方案，無非就是jsonp和iframe，隨著跨域請求的應用越來越多，W3C提供了跨域請求的標準方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以后的版本、Chrome瀏覽器、Safari 4 等已經實現了 Cross-Origin Resource Sharing 規范，實現了跨域請求。
在服務器響應客戶端的時候，帶上Access-Control-Allow-Origin頭信息。

如果設置 Access-Control-Allow-Origin:*，則允許所有域名的腳本訪問該資源。
Access-Control-Allow-Origin:http://www.phpddt.com.com,允許特定的域名訪問。

?如PHP添加響應頭信息：

header("Access-Control-Allow-Origin: *");

Cross-Origin Resource Sharing協議介紹

傳統的Ajax請求只能獲取在同一個域名下面的資源，但是HTML5打破了這個限制，允許Ajax發起跨域的請求。瀏覽器是可以發起跨域請求的，比如你可以外鏈一個外域的圖片或者腳本。但是JavaScript腳本是不能獲取這些資源的內容的，它只能被瀏覽器執行或渲染。

在Flash和Silverlight中，服務器需要創建一個crossdomain.xml的文件來允許跨域請求。如果這個文件聲明“http://your.site”允許來自“http://my.site”的請求，則來自“http://my.site”的請求可以訪問所有“http://your.site”的文件。這是一種整個站點層面上的控制模式，要么你允許一個外域的站點訪問，要么拒絕。

COR不一樣，它是頁面層次的控制模式。每一個頁面需要返回一個名為‘Access-Control-Allow-Origin’的HTTP頭來允許外域的站點訪問。你可以僅僅暴露有限的資源和有限的外域站點訪問。在COR模式中，訪問控制的職責可以放到頁面開發者的手中，而不是服務器管理員。當然頁面開發者需要寫專門的處理代碼來允許被外域訪問。

另外一個主要的區別是，某個站點的crossdomain.xml文件是最早被瀏覽器獲取并分析的。如果一個外域的站點不允許被訪問，瀏覽器壓根就不會發出跨域請求。

COR則相反，Javascript先發出跨域請求，然后檢查回復的‘Access-Control-Allow-Origin’頭。如果這個頭允許該外域訪問，則Javascript可以讀取這個回復，否則就被禁止訪問。如果請求不是一個簡單的COR，則向外域服務器發送預檢驗請求，如果回復的頭部允許訪問，則發送跨域請求，否則禁止。

COR的實現標準就是CORS協議。

對于瀏覽器來說，COR請求都是Javascript發起的，COR請求有兩種：

1、簡單的COR請求，它可以直接向外域資源發起請求。它必須僅僅包含簡單的方法和頭，具體定義看[2] 6.1。

2、如果COR包含復雜的方法和頭，它需要發出預檢驗（Preflight）請求，它先向資源服務器發出一個OPTIONS方法、包含“Origin”頭的請求。該回復可以控制COR請求的方法，HTTP頭以及驗證等信息。只有該請求獲得允許以后，才會發起真實的外域請求。

下面是一個簡單的COR請求：

var client = new XMLHttpRequest();

client.open("GET", "http://bar.org/b")

client.onreadystatechange = function() { /* do something */ }

client.send()

</script>

假設這個請求所在頁面的域是“http://foo.org”。如果來自“http://bar.org/b”的回復包含這樣的頭：

Access-Control-Allow-Origin: http://foo.org

則表明，它允許來自“http://foo.org”的跨域請求。

下面的Javascript會發出預檢驗請求和真實請求：

var client = new XMLHttpRequest();

client.open("GET", "http://bar.org/b")

client.setRequestHeader('Content-Type','text/html')

client.onreadystatechange = function() { /* do something */ }

client.send()

</script>

由于“Content-type: text/html”不是一個簡單的頭，它會先向"http://bar.org/b"發出一個OPTIONS的HTTP請求。回復可能包含這樣的頭：

Access-Control-Allow-Origin: http://foo.org

Access-Control-Max-Age: 3628800

Access-Control-Allow-Methods: GET，PUT, DELETE

Access-Control-Allow-Headers: content-type

"Access-Control-Allow-Origin"表明它允許"http://foo.org"發起跨域請求

"Access-Control-Max-Age"表明在3628800秒內，不需要再發送預檢驗請求，可以緩存該結果

"Access-Control-Allow-Methods"表明它允許GET、PUT、DELETE的外域請求

"Access-Control-Allow-Headers"表明它允許跨域請求包含content-type頭

如果預檢驗請求獲得通過，接下來Javascript就會發起真實的COR請求，過程跟簡單的COR請求類似。

CORS協議的實現

現在Html5的標準如火如荼的在制定和發展中,CORS作為HTML5的一部分，在大部分現代瀏覽器中有所支持，支持(部分支持)CORS協議的瀏覽器有IE8+, Firefox5+, Chrome12+, Safari4+

服務端實現

Thinktecture.IdentityModel? 這個庫已經為我們的WebAPI,MVC的項目做好了支持，具體參看[6]。

參考資料：

[1] http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

[2]?http://www.w3.org/TR/cors/

[3]Cross-origin_resource_sharing?

[4]跨域資源共享(Cross-Origin Resource Sharing)實現Ajax跨域請求

[5]http://restfulobjects.codeplex.com/wikipage?title=Cross%20Origin%20Resource%20Sharing&referringTitle=Documentation?

[6]CORS support in WebAPI, MVC and IIS with Thinktecture.IdentityModel

頂

踩

上一篇Java實現URI參數簽名算法，確保應用與REST服務器之間的安全通信，防止Secret Key盜用、數據篡改等惡意攻擊行為

我的同類文章

web前端（5）?J2EE服務器（2）

?Div+Css布局教程（-）CSS必備知識2015-05-06閱讀347
?一行代碼解決各種IE兼容問題,IE6,IE7,IE8,IE9,IE102015-02-10閱讀299
?你應該了解的一些web緩存相關的概念.2014-08-09閱讀328

?一小時搞定DIV+CSS布局-固定頁面開度布局2015-05-06閱讀430
?JS 無法清除Cookie的解決方法2014-08-22閱讀318

參考知識庫

JavaScript知識庫

13264關注|1512收錄

PHP知識庫

5993關注|890收錄

HTML5知識庫

10105關注|784收錄

jQuery知識庫

7965關注|934收錄

AngularJS知識庫

4352關注|518收錄

猜你在找 Html5服務器推送事件WEB前端整套教程html+divcss+javascript+jquery+html5html5服務器推送事件Jquery入門到精通（備html、css、JavaScript，javaee必備）hbuilder開發移動app視頻教程,mui視頻教程,html5視頻教程2 轉前端面試題目和答案收集前端面試題雜燴part2前端面試題目搜集Web 前端知識點總結最全的前端工程師面試題庫轉載查看評論
??暫無評論

您還沒有登錄,請[登錄]或[注冊] * 以上用戶言論只代表其個人觀點，不代表CSDN網站的觀點或立場

核心技術類目

全部主題?Hadoop?AWS?移動游戲?Java?Android?iOS?Swift?智能硬件?Docker?OpenStackVPN?Spark?ERP?IE10?Eclipse?CRM?JavaScript?數據庫?Ubuntu?NFC?WAP?jQueryBI?HTML5?Spring?Apache?.NET?API?HTML?SDK?IIS?Fedora?XML?LBS?UnitySplashtop?UML?components?Windows Mobile?Rails?QEMU?KDE?Cassandra?CloudStack?FTCcoremail?OPhone?CouchBase?云計算?iOS6?Rackspace?Web App?SpringSide?MaemoCompuware?大數據?aptech?Perl?Tornado?Ruby?Hibernate?ThinkPHP?HBase?Pure?SolrAngular?Cloud Foundry?Redis?Scala?Django?Bootstrap

轉載于:https://www.cnblogs.com/shuibi/p/6529220.html

總結

以上是生活随笔為你收集整理的利用Access-Control-Allow-Origin响应头解决跨域请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。