1 跨域資源共享資源CORS

2021-07-26 10:14:14 字數 2566 閱讀 1056

cors需要瀏覽器和伺服器同時支援。

它與同源的ajax通訊沒有差別,**完全一樣。

因些,實現cors通訊的關鍵是伺服器。只要伺服器實現了cors介面,就可以跨域通訊。

一、兩種請求

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

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

(1)請求方法是以下三種方法之一:head, get,post

(2)http的頭資訊不超出以下幾種字段:accept, accept-language, content-language,last-event-id

凡是不同時滿足上面兩個條件,就屬於非簡單請求。

二、簡單請求

2.1 基本流程

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

access-control-allow-origin: 是必須的,如果為*時,表示接受任意網域名稱的請示。

access-control-allow-credentials:是可選的。它的值是乙個布林值,表示是否允許傳送cookie。預設情況下,cookie不包括在cors請求之中。

access-control-expose-headers:是可選的。cors請示時,xmlhttprequest物件的getresponseheader()方法只能拿到6個基本字段: cache-control, content-language, content-type,expires, last-modified, pragma.

2.2  withcredentials屬性

上面說到,cors請求預設不發磅cookie和http認證資訊。如果要把cookie發到伺服器,一方面要伺服器同意,指定access-control-allow-credentials欄位。

access-control-allow-credentials: true

另一方面,開發者必須在ajax請求中開啟withcredentials屬性。

否則,即使伺服器同意傳送cookie,瀏覽器也不會傳送。或者,伺服器要求設定cookie,瀏覽器也不會處理。

但是,如果省略withcredentials設定,有的瀏覽器還是會一起傳送cookie。這時,可以顯式關閉withcredentials.

xhr.withcredentials = false;

注:如果要傳送cookie, access-control-allow-origin就不能設為*了,必須指定明確的,與請求網頁一致的網域名稱。也要遵循同源策略。

三、非簡單請求

3 .1 預檢請求

會在正式通訊之前,增加一次http查詢請求,稱為「預檢」請求。

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

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

(1)access-control-request-method

是必須的,用來列出瀏覽器的cors請求會用哪些http方法,

(2)access-control-request-headers

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

3.2 預檢請示的回應

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

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

(2)access-control-allow-headers

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

(3) access-control-allow-credentials

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

(4) access-control-max-age

該欄位可選,用來指定本次預檢請求的有效戎,單位為秒。

3.3 瀏覽器的正常請示和回應

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

四 與jsonp比較

cors 與jsonp的使用目的相同,但是比jsonp更強大。

jsonp只支援get請求,cors支援所有型別的http請求。jsonp的優勢在於支援老式瀏覽器,以及可以向不支援 cors的**請求資料。

跨域資源共享 CORS

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

跨域資源共享 CORS

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

CORS 跨域資源共享

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