這篇文章主要介紹“options請求是怎樣的”,在日常操作中,相信很多人在options請求是怎樣的問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”options請求是怎樣的”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供軹城企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站制作、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為軹城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
我們可以看下 MDN 中的一段描述:
★HTTP 的 OPTIONS 方法 用于獲取目的資源所支持的通信選項(xiàng)??蛻舳丝梢詫μ囟ǖ?URL 使用 OPTIONS 方法,也可以對整站(通過將 URL 設(shè)置為“*”)使用該方法。
”
簡單來說,就是可以用 options 請求去嗅探某個請求在對應(yīng)的服務(wù)器中都支持哪種請求方法。
在前端中我們一般不會主動發(fā)起這個請求,但是往往你可以看到瀏覽器中相同的請求發(fā)起了 2 次,如圖:
其實(shí),這是因?yàn)樵诳缬虻那闆r下,在瀏覽器發(fā)起"復(fù)雜請求"時主動發(fā)起的??缬蚬蚕順?biāo)準(zhǔn)規(guī)范要求,對那些可能對服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請求方法(特別是 GET 以外的 HTTP 請求,或者搭配某些 MIME 類型的 POST 請求),瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個預(yù)檢請求(preflight request),從而獲知服務(wù)端是否允許該跨域請求。服務(wù)器確認(rèn)允許之后,才發(fā)起實(shí)際的 HTTP 請求。
某些請求不會觸發(fā) CORS 預(yù)檢請求,這樣的請求一般稱為"簡單請求",而會觸發(fā)預(yù)檢的請求則稱為"復(fù)雜請求"。
GET、HEAD、POST
時發(fā)的請求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
application/x-www-form-urlencoded、multipart/form-data、text/plain
關(guān)鍵字段 | 作用 |
---|---|
Access-Control-Request-Method | 告知服務(wù)器,實(shí)際請求將使用 POST 方法 |
Access-Control-Request-Headers | 告知服務(wù)器,實(shí)際請求將攜帶的自定義請求首部字段 |
如:
Access-Control-Request-Method: POSTAccess-Control-Request-Headers: X-PINGOTHER, Content-Type
關(guān)鍵字段 | 作用 |
---|---|
Access-Control-Allow-Methods | 表明服務(wù)器允許客戶端使用什么方法發(fā)起請求 |
Access-Control-Allow-Origin | 允許跨域請求的域名,如果要允許所有域名則設(shè)置為 * |
Access-Control-Allow-Headers | 將實(shí)際請求所攜帶的首部字段告訴服務(wù)器 |
Access-Control-Max-Age | 指定了預(yù)檢請求的結(jié)果能夠被緩存多久 |
當(dāng)我們發(fā)起跨域請求時,如果是簡單請求,那么我們只會發(fā)出一次請求,但是如果是復(fù)雜請求則先發(fā)出 options 請求,用于確認(rèn)目標(biāo)資源是否支持跨域,然后瀏覽器會根據(jù)服務(wù)端響應(yīng)的 header 自動處理剩余的請求,如果響應(yīng)支持跨域,則繼續(xù)發(fā)出正常請求,如果不支持,則在控制臺顯示錯誤。
由此可見,當(dāng)觸發(fā)預(yù)檢時,跨域請求便會發(fā)送 2 次請求,既增加了請求數(shù),也延遲了請求真正發(fā)起的時間,嚴(yán)重影響性能。
所以,我們可以優(yōu)化 Options 請求,主要有 2 種方法。
Access-Control-Max-Age
字段,那么當(dāng)?shù)谝淮握埱笤?URL 時會發(fā)出 OPTIONS 請求,瀏覽器會根據(jù)返回的 Access-Control-Max-Age 字段緩存該請求的 OPTIONS 預(yù)檢請求的響應(yīng)結(jié)果(具體緩存時間還取決于瀏覽器的支持的默認(rèn)最大值,取兩者最小值,一般為 10 分鐘)。在緩存有效期內(nèi),該資源的請求(URL 和 header 字段都相同的情況下)不會再觸發(fā)預(yù)檢。(chrome 打開控制臺可以看到,當(dāng)服務(wù)器響應(yīng) Access-Control-Max-Age 時只有第一次請求會有預(yù)檢,后面不會了。注意要開啟緩存,去掉 disable cache 勾選。)到此,關(guān)于“options請求是怎樣的”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!