跨域資源共享 CORS

2021-08-14 18:25:38 字數 3760 閱讀 1738

cors需要瀏覽器和伺服器同時支援。目前,所有瀏覽器都支援該功能。

前端:對應於前端請求來說cors通訊與同源的ajax通訊沒有差別,**完全一樣。瀏覽器一旦發現ajax請求跨源,就會自動新增一些附加的頭資訊,有時還會多出一次附加的請求,但使用者不會有感覺。

後端:只要伺服器實現了cors介面,就可以跨源通訊。

瀏覽器將cors請求分成兩類:簡單請求和預檢請求(非簡單請求)。

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

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

· head

· get

· post

2,除了瀏覽器自動帶上的請求頭(如 connection \ user-agent 等)之外,只允許下面幾種請求頭:

· accept

· accept-language

· content-language

· last-event-id

· 不滿足則是預檢請求

對於簡單請求,瀏覽器直接發出cors請求。具體來說,就是在頭資訊之中,增加乙個origin欄位

origin欄位用來說明,本次請求來自哪個源(協議 + 網域名稱 + 埠)。後端根據這個值,決定是否同意這次請求。

user-agent:如果origin指定的網域名稱在許可範圍內,伺服器返回的響應會多出幾個頭資訊字段

access-control-allow-origin: 

access-control-allow-credentials:

access-control-expose-headers:

content-type:

上面的頭資訊之中,有三個與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-control、 content-language、content-type、expires、last-modified、pragma。如果想拿到其他字段,就必須在access-control-expose-headers裡面指定。

注意:需要注意的是,如果要傳送cookie,access-control-allow-origin就不能設為星號,必須指定明確的、與請求網頁一致的網域名稱。同時,cookie依然遵循同源政策,只有用伺服器網域名稱設定的cookie才會上傳,其他網域名稱的cookie並不會上傳

預檢請求的cors請求,會在正式通訊之前,增加一次http查詢請求,稱為"預檢"請求(preflight)。

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

下面是乙個put請求的例項:

user-agent:"預檢"請求用的請求方法是options,表示這個請求是用來詢問的。頭資訊裡面,關鍵字段是origin,表示請求來自哪個源。

除了origin欄位,"預檢"請求的頭資訊包括兩個特殊字段。

1)access-control-request-method

該字段是必須的,用來列出瀏覽器的cors請求會用到哪些http方法,上例是put。

2)access-control-request-headers

該字段是乙個逗號分隔的字串,指定瀏覽器cors請求會額外傳送的頭資訊字段,上例是x-custom-header。

· 伺服器收到"預檢"請求以後,檢查了origin、access-control-request-method和access-control-request-headers欄位以後,確認允許跨源請求,就可以做出回應。

可以填寫*或者請求請求網域名稱,以表示同意此跨域請求。

2)access-control-allow-methods

該欄位必需,它的值是逗號分隔的乙個字串,表明伺服器支援的所有跨域請求的方法。注意,返回的是所有支援的方法,而不單是瀏覽器請求的那個方法。這是為了避免多次"預檢"請求。

3)access-control-allow-headers

如果瀏覽器請求包括access-control-request-headers欄位,則access-control-allow-headers欄位是必需的。它也是乙個逗號分隔的字串,表明伺服器支援的所有頭資訊字段,不限於瀏覽器在"預檢"中請求的字段。

4)access-control-allow-credentials

該字段與簡單請求時的含義相同。

5)access-control-max-age

該欄位可選,用來指定本次預檢請求的有效期,單位為秒。上面結果中,有效期是20天(1728000秒),即允許快取該條回應1728000秒(即20天),在此期間,不用發出另一條預檢請求。

一旦伺服器通過了"預檢"請求,以後每次瀏覽器正常的cors請求,就都跟簡單請求一樣,會有乙個origin頭資訊字段。伺服器的回應,也都會有乙個access-control-allow-origin頭資訊字段

跨域資源共享 CORS

跨域資源共享 cross origin resource sharing 是一種機制,它使用額外的 http 頭部告訴瀏覽器可以讓乙個web應用進行跨域資源請求。若乙個請求同時滿足下述所有條件,則該請求可視為 簡單請求 注 灰色字型內容了解即可 手動設定的頭部字段只能是 注意 也可以設定 forbi...

CORS 跨域資源共享

foreword cors principle 三個訪問控制場景 簡單請求 預請求帶憑據的請求 http請求頭 http響應頭 ie對cors的實現 瀏覽器的支援 由於同源策略限制從乙個源載入的文件或指令碼與來自另乙個源的資源進行互動。在web開發中跨域是難免的問題,或是開發時的跨域,或是線上資源請...

CORS 跨域資源共享

1,簡介 cors是乙個w3c標準,全稱是 跨域資源共享 cross origin resource sharing 它允許瀏覽器向跨源 協議 網域名稱 埠 伺服器,發出xmlhttprequest請求,從而克服了ajax只能同源使用的限制。cors需要瀏覽器和伺服器同時支援。它的通訊過程,都是瀏覽...