CORS(Cross-origin resource sharing)是一種安全機制,允許其他域請求獲取到當前域中web頁面中的限制資源脐湾。web頁面可以自由的嵌入圖片犁珠,樣式,腳本丝蹭,iframe慢宗,視頻等資源,但是由于同源策略的限制奔穿,跨域請求會被限制镜沽。
CORS定義了一種方式,通過這種方式瀏覽器和服務器可以互相確定允許跨域請求是否是安全的贱田。這樣就比單純的同源請求有更多的自由度缅茉,也可以實現(xiàn)更多的功能,而且也比允許全部的跨域請求更安全男摧。CORS是W3C中的一個推薦標準蔬墩。
CORS原理
CORS標準介紹了新的HTTP headers,在瀏覽器和服務器都獲得授權的情況下耗拓,這些headers給它們提供了一種訪問遠程URL的方式拇颅。盡管服務器可以執(zhí)行一些驗證和授權,但是瀏覽器也有責任來支持這些headers乔询,遵循限制樟插。
對于AJAX和可以修改數(shù)據(jù)的HTTP請求方法來說,規(guī)范規(guī)定瀏覽器預檢查請求哥谷,通過請求頭中的OPTIONS方法獲取服務端支持的請求方法岸夯,然后得到服務器的批準之后,使用真實的HTTP請求方法發(fā)送真實的請求们妥。服務器也可以通知客戶端是否需要隨請求發(fā)送證書(包括Cookies和HTTP認證數(shù)據(jù))猜扮。
簡單示例
當支持CORS的瀏覽器嘗試發(fā)起跨域請求時:
1.瀏覽器發(fā)送OPTIONS請求,并在HTTP頭中指定Origin监婶,Origin的值是提供父級頁面的域旅赢。當前域http://www.foo.com
中的頁面嘗試獲取域http://www.bar.com
中的用戶數(shù)據(jù)時,下面的請求頭將會發(fā)送給http://www.bar.com
域:
Origin:http://www.foo.com
2.服務器可能會有下面的響應:
- 響應頭中的Access-Control-Allow-Origin標識允許那個來源站點惑惶。例如:
Access-Control-Allow-Origin: http://www.foo.com
- 如果服務器不支持跨域請求會返回錯誤頁面
- 響應頭中的Access-Control-Allow-Origin如果是通配符則表示允許任何域訪問:
Access-Control-Allow-Origin: *
當一個頁面或者API是完全公開的煮盼,并且可以被任何人或者任意站點上的代碼訪問時,通配符同源策略是一個好的方法带污。例如在公共托管服務上的免費可用的Google字體僵控。
通配符*
意味著服務器不需要請求提供憑證,有意義的HTTP身份驗證鱼冀,客戶端的SSL驗證报破,也不允許發(fā)送cookies悠就。
注意在CORS架構中,Access-Control-Allow-Origin頭是外部web服務器(http://www.bar.com
)設置的充易,而不是源web服務器(http://www.foo.com
)設置的梗脾。CORS允許外部web服務器授權web應用使用它的服務,不控制web應用訪問外部服務盹靴。
預檢查示例
執(zhí)行某些類型的跨域ajax請求時炸茧,支持CORS的瀏覽器會插入一個額外的預檢查請求來決定是否有權限執(zhí)行相應的動作。
OPTIONS /
Host: bar.com
Origin: http://foo.com
如果bar.com想要接收這種行為稿静,它可能會回復下面的響應頭:
Access-Control-Allow-Origin: http://foo.com
Access-Control-Allow-Methods: PUT, DELETE
Headers
CORS相關的HTTP頭如下:
請求頭
- Origin
- Access-Control-Request-Method
- Access-Control-Request-Headers
響應頭
- Access-Control-Allow-Origin
- Access-Control-Allow-Credentials
- Access-Control-Expose-Headers
- Access-Control-Max-Age
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
瀏覽器支持情況
瀏覽器支持詳情可以參考can I use網(wǎng)站上面的統(tǒng)計梭冠,點這里查看詳情。
歷史
跨域支持最早是在2004年的VoiceXML中作為一個雜項提出的自赔,主要是為了支持VoiceXML瀏覽器可以安全獲取跨域數(shù)據(jù)妈嘹。機制本質(zhì)上是通用的,在VoiceXML中沒有具體化绍妨,隨后被分配到一個實現(xiàn)備忘中。然后主要瀏覽器廠商參與的W3C的WebApps工作組開始把備忘錄規(guī)范化成W3C工作草案柬脸,最后才慢慢變成W3C推薦標準他去。
CORS和JSONP對比
CORS可以作為JSONP模式的一個現(xiàn)代選擇。JSONP只支持GET請求倒堕,而CORS也支持其他類型的HTTP請求方法灾测。使用CORS,開發(fā)者可以正常使用XMLHttpRequest對象發(fā)送請求垦巴,這種方法處理錯誤比JSONP方便媳搪。從另一方面來說,JSONP可以兼容不支持CORS的老版瀏覽器骤宣。CORS只能被大多數(shù)現(xiàn)代瀏覽器支持秦爆。JSONP可能導致XSS問題,而CORS允許站點手動解析響應來確保安全憔披。
做好前端開發(fā)必須對HTTP的相關知識有所了解等限,所以我創(chuàng)建了一個專題前端必備HTTP技能專門收集前端相關的HTTP知識,歡迎關注芬膝,投稿望门。
PS:本文翻譯自維基百科,原文地址https://en.wikipedia.org/wiki/Cross-origin_resource_sharing