標簽： cors 跨域請求 ACAO
分類：
傳統的跨域請求沒有好的解決方案，無非就是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請求：
<script language="Javascript" type="text/javascript">
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會發出預檢驗請求和真實請求：
<script language="Javascript" type="text/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跨域請求
[6]CORS support in WebAPI, MVC and IIS with Thinktecture.IdentityModel
- 頂
- 0
- 踩
- 2
我的同類文章
- •Div+Css布局教程（-）CSS必備知識2015-05-06
- •一行代碼解決各種IE兼容問題,IE6,IE7,IE8,IE9,IE102015-02-10
- •你應該了解的 一些web緩存相關的概念.2014-08-09
- •一小時搞定DIV+CSS布局-固定頁面開度布局2015-05-06
- •JS 無法清除Cookie的解決方法2014-08-22
- 猜你在找
暫無評論