摘要:服務器根據這個值,決定是否同意這次請求。如果指定的源,不在許可范圍內,服務器會返回一個正常的回應。注意,這種錯誤無法通過狀態碼識別,因為回應的狀態碼有可能是。如果指定的域名在許可范圍內,服務器返回的響應,會多出幾個頭信息字段。
CORS 跨域資源共享 Cross-origin resource sharing
整個CORS通信過程,都是瀏覽器自動完成,不需要用戶參與。對于開發者來說,CORS通信與同源的AJAX通信沒有差別,代碼完全一樣。瀏覽器一旦發現AJAX請求跨源,就會自動添加一些附加的頭信息,有時還會多出一次附加的請求,但用戶不會有感覺。
因此,實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口,就可以跨源通信。
瀏覽器將CORS請求分成兩類:簡單請求(simple request)和非簡單請求(not-so-simple request)。
只要同時滿足以下兩大條件,就屬于簡單請求。
(1) 請求方法是以下三種方法之一: HEAD GET POST (2)HTTP的頭信息不超出以下幾種字段: Accept Accept-Language Content-Language Last-Event-ID Content-Type:只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同時滿足上面兩個條件,就屬于非簡單請求。
簡單請求
對于簡單請求,瀏覽器直接發出CORS請求。具體來說,就是在頭信息之中,增加一個Origin字段。
下面是一個例子,瀏覽器發現這次跨源AJAX請求是簡單請求,就自動在頭信息之中,添加一個Origin字段。
GET /cors HTTP/1.1 Origin: http://api.bob.com Host: api.alice.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...
上面的頭信息中,Origin字段用來說明,本次請求來自哪個源(協議 + 域名 + 端口)。服務器根據這個值,決定是否同意這次請求。
如果Origin指定的源,不在許可范圍內,服務器會返回一個正常的HTTP回應。瀏覽器發現,這個回應的頭信息沒有包含Access-Control-Allow-Origin字段(詳見下文),就知道出錯了,從而拋出一個錯誤,被XMLHttpRequest的onerror回調函數捕獲。注意,這種錯誤無法通過狀態碼識別,因為HTTP回應的狀態碼有可能是200。
如果Origin指定的域名在許可范圍內,服務器返回的響應,會多出幾個頭信息字段。
Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Credentials: true Access-Control-Expose-Headers: FooBar Content-Type: text/html; charset=utf-8
(1)Access-Control-Allow-Origin
該字段是必須的。它的值要么是請求時Origin字段的值,要么是一個*,表示接受任意域名的請求。
(2)Access-Control-Allow-Credentials
該字段可選。它的值是一個布爾值,表示是否允許發送Cookie。默認情況下,Cookie不包括在CORS請求之中。設為true,即表示服務器明確許可,Cookie可以包含在請求中,一起發給服務器。這個值也只能設為true,如果服務器不要瀏覽器發送Cookie,刪除該字段即可。
(3)Access-Control-Expose-Headers
該字段可選。CORS請求時,XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必須在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader("FooBar")可以返回FooBar字段的值。
withCredentials 屬性
上面說到,CORS請求默認不發送Cookie和HTTP認證信息。如果要把Cookie發到服務器,一方面要服務器同意,指定Access-Control-Allow-Credentials字段。
Access-Control-Allow-Credentials: true
另一方面,開發者必須在AJAX請求中打開withCredentials屬性。
var xhr = new XMLHttpRequest(); xhr.withCredentials = true;
否則,即使服務器同意發送Cookie,瀏覽器也不會發送。或者,服務器要求設置Cookie,瀏覽器也不會處理。
但是,如果省略withCredentials設置,有的瀏覽器還是會一起發送Cookie。這時,可以顯式關閉withCredentials。
xhr.withCredentials = false;
需要注意的是,如果要發送Cookie,Access-Control-Allow-Origin就不能設為星號,必須指定明確的、與請求網頁一致的域名。同時,Cookie依然遵循同源政策,只有用服務器域名設置的Cookie才會上傳,其他域名的Cookie并不會上傳,且(跨源)原網頁代碼中的document.cookie也無法讀取服務器域名下的Cookie。
(只看簡單請求了)
JSONP只支持GET請求,CORS支持所有類型的HTTP請求。JSONP的優勢在于支持老式瀏覽器,以及可以向不支持CORS的網站請求數據。
整理自跨域資源共享 CORS 詳解-峰哥
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83149.html
摘要:說明測試使用的接口域名,多域名為和。設置多域名嘗試直接通過的模塊追加值實現,如下接口請求和響應頭如下當前域為,需跨域請求的資源。故通過該方法不能設置多域名進行。 首發于 樊浩柏科學院 平常我們遇到跨域問題時,常使用 cors(Cross-origin resource sharin)方式解決。不知你是否注意到,在設置響應頭 Access-Control-Allow-Origin 域的...
摘要:而我的新輪子也并不是專門解決它的問題的,而是順便解決而已。概述這個包,支持在所有的項目中使用。一旦出現成員,代表允許全部。列出允許跨域請求的方法列表,默認是代表所有方法。信息地址嗯,新輪子,求一波。 showImg(https://segmentfault.com/img/bV5VxN?w=844&h=656); 是的,可能了解 Laravel 的都知道,在 Laravel 中簡單的設...
摘要:簡介是一個標準,全稱是跨域資源共享。它允許瀏覽器向跨源服務器,發出請求,從而克服了只能同源使用的限制。如果指定的源,不在許可范圍內,服務器會返回一個正常的回應。該字段也可以設為星號,表示同意任意跨源請求。這是為了避免多次預檢請求。 簡介 CORS是一個W3C標準,全稱是跨域資源共享(Cross-origin resource sharing)。它允許瀏覽器向跨源服務器,發出XMLHtt...
摘要:設置的值,為其當前域或其當前域的父域。場景文檔中的一個腳本執行以下語句即可通過同源檢測跨源網絡訪問同源策略控制了不同源之間的交互。服務器確認允許之后,才發起實際的請求。 文章大綱 同源策略 同源是什么? 如何跨源,以及場景應用 源的更改 跨源網絡訪問 跨源腳本API訪問 跨源數據存儲訪問 了解CORS CORS是什么? CORS功能概述 CORS關于Cookie ...
閱讀 3574·2019-08-30 15:55
閱讀 1373·2019-08-29 16:20
閱讀 3656·2019-08-29 12:42
閱讀 2661·2019-08-26 10:35
閱讀 1010·2019-08-26 10:23
閱讀 3405·2019-08-23 18:32
閱讀 897·2019-08-23 18:32
閱讀 2892·2019-08-23 14:55