瀏覽器的跨域請求 與 CORS(跨域資源共享)

  今天在學習.netcore的時候,看到了.netcore規定的中間件的使用順序,如下圖:

 其中有一個點不是很明白。CORS 是什麼呢? 翻了一些資料,記錄一下學習歷程。

CORS是什麼?

CORS(Cross-origin resource sharing)是一個W3C標準,中文翻譯爲:跨域資源共享。

(在網上還看到了這樣的一句話,覺得比較合理:爲了解決跨域資源共享問題,瀏覽器廠商和標準組織在 HTTP 協議的基礎上,提出了 CORS 標準協議。CORS 協議由一組 HTTP Header 構成,用於標識某個資源是否可以被跨域訪問。)

根據定義可以知道,應該是用在跨域方面的一個協議。

那什麼是跨域呢?簡單來說,就是不是一個網站,這樣說也是有問題的,比如一個用戶看到的網站,可能加載不同的信息,用的是不同的站點的。所以,詳細說應該是請求的信息中,協議,ip,端口號,只要有一個是不同的,就稱之爲跨域。

回到中心問題。那我們瞭解了什麼是CORS,那在開發的過程中,應該怎樣去使用呢?或者說哪裏可以用到這個CORS呢?

 首先,我們在開發過程中可能會遇到以下問題:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

一般情況下,我們修改 Access-Control-Allow-Origin  Access-Control-Allow-Headers    Access-Control-Allow-Methods  等配置,就可以解決這個問題。

那爲什麼這樣修改配置就可以處理這個問題呢? 其實這裏利用的就是CORS標準。

在詳細講解之前,我們先了解一個知識點:瀏覽器一般將請求分爲簡單請求和非簡單請求。

只要同時滿足以下兩大條件,就屬於簡單請求。

(1) 請求方法是以下三種方法之一:

  • HEAD
  • GET
  • POST

(2)HTTP的頭信息不超出以下幾種字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限於三個值application/x-www-form-urlencodedmultipart/form-datatext/plain

瀏覽器對這兩種請求的處理,是不一樣的。

簡單請求

如果Origin指定的域名在許可範圍內,服務器返回的響應,會多出幾個頭信息字段。


Access-Control-Allow-Origin: http://****
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的頭信息之中,有三個與CORS請求相關的字段,都以Access-Control-開頭。

(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-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。如果想拿到其他字段,就必須在Access-Control-Expose-Headers裏面指定。上面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值。

 

非簡單請求

非簡單請求是那種對服務器有特殊要求的請求,比如請求方法是PUTDELETE,或者Content-Type字段的類型是application/json

非簡單請求的CORS請求,會在正式通信之前,增加一次HTTP查詢請求,稱爲"預檢"請求(preflight)。

瀏覽器先詢問服務器,當前網頁所在的域名是否在服務器的許可名單之中,以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答覆,瀏覽器纔會發出正式的XMLHttpRequest請求,否則就報錯。

 非簡單請求的CORS請求,會在正式通信之前,增加一次HTTP查詢請求,稱爲"預檢"請求(preflight)。服務器收到"預檢"請求以後,檢查了OriginAccess-Control-Request-MethodAccess-Control-Request-Headers字段以後,確認允許跨源請求,就可以做出迴應。

一旦服務器通過了"預檢"請求,以後每次瀏覽器正常的CORS請求,就都跟簡單請求一樣,會有一個Origin頭信息字段。服務器的迴應,也都會有一個Access-Control-Allow-Origin頭信息字段。

 

通過以上的瞭解,我們基本也就瞭解了,如何使用CORS,以及出現跨域問題的時候,應該如何進行修改了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

參考文檔: http://www.ruanyifeng.com/blog/2016/04/cors.html

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章