什麼是 options 請求
我們可以看下 MDN 中的一段描述:
★HTTP 的 OPTIONS 方法 用於獲取目的資源所支持的通信選項。客戶端可以對特定的 URL 使用 OPTIONS 方法,也可以對整站(通過將 URL 設置爲“*”)使用該方法。
”
簡單來說,就是可以用 options 請求去嗅探某個請求在對應的服務器中都支持哪種請求方法。
在前端中我們一般不會主動發起這個請求,但是往往你可以看到瀏覽器中相同的請求發起了 2 次,如圖:
其實,這是因爲在跨域的情況下,在瀏覽器發起"複雜請求"時主動發起的。跨域共享標準規範要求,對那些可能對服務器數據產生副作用的 HTTP 請求方法(特別是 GET 以外的 HTTP 請求,或者搭配某些 MIME 類型的 POST 請求),瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求(preflight request),從而獲知服務端是否允許該跨域請求。服務器確認允許之後,才發起實際的 HTTP 請求。
簡單請求與複雜請求
某些請求不會觸發 CORS 預檢請求,這樣的請求一般稱爲"簡單請求",而會觸發預檢的請求則稱爲"複雜請求"。
簡單請求
請求方法爲
GET、HEAD、POST
時發的請求人爲設置了規範集合之內的首部字段,如
Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width
Content-Type
的值僅限於下列三者之一,即application/x-www-form-urlencoded、multipart/form-data、text/plain
請求中的任意 XMLHttpRequestUpload 對象均沒有註冊任何事件監聽器;
請求中沒有使用 ReadableStream 對象。
複雜請求
使用了下面任一 HTTP 方法,PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH
人爲設置了以下集合之外首部字段,即簡單請求外的字段
Content-Type 的值不屬於下列之一,即
application/x-www-form-urlencoded、multipart/form-data、text/plain
options 關鍵的請求頭字段
request header 的關鍵字段
關鍵字段 | 作用 |
---|---|
Access-Control-Request-Method | 告知服務器,實際請求將使用 POST 方法 |
Access-Control-Request-Headers | 告知服務器,實際請求將攜帶的自定義請求首部字段 |
如:
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
response header 的關鍵字段
關鍵字段 | 作用 |
---|---|
Access-Control-Allow-Methods | 表明服務器允許客戶端使用什麼方法發起請求 |
Access-Control-Allow-Origin | 允許跨域請求的域名,如果要允許所有域名則設置爲 * |
Access-Control-Request-Headers | 將實際請求所攜帶的首部字段告訴服務器 |
Access-Control-Max-Age | 指定了預檢請求的結果能夠被緩存多久 |
Options 請求優化
當我們發起跨域請求時,如果是簡單請求,那麼我們只會發出一次請求,但是如果是複雜請求則先發出 options 請求,用於確認目標資源是否支持跨域,然後瀏覽器會根據服務端響應的 header 自動處理剩餘的請求,如果響應支持跨域,則繼續發出正常請求,如果不支持,則在控制檯顯示錯誤。
由此可見,當觸發預檢時,跨域請求便會發送 2 次請求,既增加了請求數,也延遲了請求真正發起的時間,嚴重影響性能。
所以,我們可以優化 Options 請求,主要有 2 種方法。
轉爲簡單請求,如用 JSONP 做跨域請求
對 options 請求進行緩存,服務器端設置
Access-Control-Max-Age
字段,那麼當第一次請求該 URL 時會發出 OPTIONS 請求,瀏覽器會根據返回的 Access-Control-Max-Age 字段緩存該請求的 OPTIONS 預檢請求的響應結果(具體緩存時間還取決於瀏覽器的支持的默認最大值,取兩者最小值,一般爲 10 分鐘)。在緩存有效期內,該資源的請求(URL 和 header 字段都相同的情況下)不會再觸發預檢。(chrome 打開控制檯可以看到,當服務器響應 Access-Control-Max-Age 時只有第一次請求會有預檢,後面不會了。注意要開啓緩存,去掉 disable cache 勾選。)
總結
options 請求就是預檢請求,可用於檢測服務器允許的 http 方法。當發起跨域請求時,由於安全原因,觸發一定條件時瀏覽器會在正式請求之前自動先發起 OPTIONS 請求,即 CORS 預檢請求,服務器若接受該跨域請求,瀏覽器才繼續發起正式請求。
參考資料
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
https://zhuanlan.zhihu.com/p/70032617
最後
如果你覺得這篇內容對你挺有啓發,我想邀請你幫我三個小忙:
點個「在看」,讓更多的人也能看到這篇內容(喜歡不點在看,都是耍流氓 -_-)
歡迎加我微信「qianyu443033099」拉你進技術羣,長期交流學習...
關注公衆號「前端下午茶」,持續爲你推送精選好文,也可以加我爲好友,隨時聊騷。
點個在看支持我吧,轉發就更好了