CORS 跨域資源共享

2021-09-11 13:05:54 字數 2434 閱讀 2307

foreword

cors principle

三個訪問控制場景

簡單請求

預請求帶憑據的請求

http請求頭

http響應頭

ie對cors的實現

瀏覽器的支援

由於同源策略限制從乙個源載入的文件或指令碼與來自另乙個源的資源進行互動。在web開發中跨域是難免的問題,或是開發時的跨域,或是線上資源請求的跨域。我們可以使用「cors」允許跨院訪問。

先簡單說下跨域,當乙個資源請求乙個其它網域名稱或者另外乙個埠的資源時會產生乙個跨域http請求(cross-origin http request)。為了訪問資源的可靠信,會有同源策略的限制,瀏覽器會攔截跨域請求的返回結果,有些瀏覽器會更加嚴格,不允許從https的域跨域訪問http,如chrome和firefox,這些瀏覽器在請求還未發出的時候就會攔截請求。

cors(cross-origin resource sharing,跨域資源共享)是w3c的乙個工作草案,定義了在必須訪問跨域資源時,瀏覽器與伺服器應該如何溝通。cors背後的基本思想,就是使用自定義的http請求頭部,讓瀏覽器和伺服器進行溝通,從而決定請求或響應是應該成功,還是失敗。

這個規範是對針對api容器的,比如 xmlhttprequest 或者 fetch

比如乙個簡單的get或者post請求,它沒有自定義的頭部,而主題內容是text/plain。在傳送請求時,需要給它附加乙個額外的oringin頭部,其中包含請求頁面的源資訊(協議,網域名稱和埠),以便伺服器根據這個頭部訊息來決定是否給予響應。下面是oringin頭部的乙個示例:

origin:

如果伺服器認為這個請求可以接受,就在access-control-allow-origin頭部中返回相同的源資訊。示例:

access-control-allow-origin: origin:

如果沒有這個頭部,或者有這個頭部但是源資訊不匹配,瀏覽器就會駁回請求。正常情況下,瀏覽器會處理請求。注意,這裡的請求和響應都不包含cookie資訊。

cors需要瀏覽器和伺服器同時支援。目前,所有瀏覽器都支援該功能,ie瀏覽器不能低於ie10。 瀏覽器會自動判斷如果跨域,自動會新增一些附加的頭部資訊,還有可能傳送預請求。所以,如果服務端實現了響應cors的介面,就可以跨域訪問。

除了使用者**自動設定的頭部外,唯一允許人工設定的頭部是 fetch 規範定義的「 cors-safelisted request-header」,如下:

允許的 content-type 值有:

multipart/form-data

text/plain

乙個簡單的cors頭處理的跨域請求

除了使用者**自動設定的頭部外,不包括一下的頭部資訊,如下:

content-type 值有除了一下之外的:

multipart/form-data

text/plain

簡而言之,就是非簡單請求的請求就會傳送預請求。

傳送這個請求之後,伺服器可以決定是否允許這種型別的請求。伺服器通過在響應中傳送頭部和瀏覽器進行溝通。preflight請求結束後,結果將按照響應頭中指定的時間快取起來。而為此付出的代價只是第一次傳送非簡單請求時多一次http請求。

origin:

access-control-request-method:

access-control-request-headers:[, ]*

access-control-allow-origin:| *

access-control-expose-headers:x-my-custom-header,x-another-custom-header

access-control-max-age:

access-control-allow-credentials:true | false

access-control-allow-methods:[, ]*

access-control-allow-headers:[, ]*

好訊息是對於cors在ie 10中有完整的實現

跨域資源共享 CORS

cors需要瀏覽器和伺服器同時支援。目前,所有瀏覽器都支援該功能。前端 對應於前端請求來說cors通訊與同源的ajax通訊沒有差別,完全一樣。瀏覽器一旦發現ajax請求跨源,就會自動新增一些附加的頭資訊,有時還會多出一次附加的請求,但使用者不會有感覺。後端 只要伺服器實現了cors介面,就可以跨源通...

跨域資源共享 CORS

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

CORS 跨域資源共享

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