淺談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問(wèn)題
今天在使用fetch方法
fetch('xxx.com',{header:{bbbbbbb:111}})
瀏覽器返回的請(qǐng)求信息中，header變成了
:authority:koss.nocorp.me :method:OPTIONS :path:/?a=1 :scheme:https accept:*/* accept-encoding:gzip, deflate, br accept-language:zh-CN,zh;q=0.8 access-control-request-headers:bbbbbbbbbbb access-control-request-method:GET origin:http://localhost:3333 referer:http://localhost:3333/ user-agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
而該次請(qǐng)求的Request Method也變成了OPTION，不論是生成的奇怪請(qǐng)求頭，還是OPTION方法，都是沒(méi)有遇見(jiàn)過(guò)的。
這次請(qǐng)求與平時(shí)開(kāi)發(fā)中發(fā)送的請(qǐng)求有以下幾點(diǎn)不同
1.該次請(qǐng)求對(duì)象網(wǎng)站是跨域地址
2.本次請(qǐng)求添加的請(qǐng)求頭服務(wù)端不會(huì)獲取
遂根據(jù)瀏覽器返回的請(qǐng)求信息字段名進(jìn)行查詢，查詢得知
access-control-request-headers:bbbbbbbbbbb access-control-request-method:GET
名為預(yù)檢頭，是CORS請(qǐng)求中用于向服務(wù)端發(fā)送請(qǐng)求時(shí)獲取準(zhǔn)許的一個(gè)步驟。服務(wù)端的回應(yīng)主要在Response 中的Access-Control-Allow-Origin字段體現(xiàn)。
具體相關(guān)信息可以查閱MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
以上這篇淺談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)易輪播圖最全代碼解析(ES6面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易輪播圖最全代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript雙向鏈表實(shí)現(xiàn)LFU緩存算法
本文主要介紹了JavaScript雙向鏈表實(shí)現(xiàn)LFU緩存算法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
昨天我問(wèn)一美工jQuery怎么樣了，他說(shuō)簡(jiǎn)單的還可以，復(fù)雜的就不行了，我又問(wèn)是哪種程度的復(fù)雜？2010-11-11
js中的string.format函數(shù)代碼，學(xué)習(xí)js的朋友可以參考下。2011-07-07
一文詳細(xì)分析前端請(qǐng)求中的“Unsupported?Media?Type”問(wèn)題
在Web開(kāi)發(fā)中,前后端交互頻繁遇到HTTP狀態(tài)碼415錯(cuò)誤,這表明服務(wù)器無(wú)法處理因Content-Type不匹配的請(qǐng)求,常見(jiàn)于POST或PUT請(qǐng)求,必須確保請(qǐng)求頭中的Content-Type與服務(wù)器期望的一致,跨域請(qǐng)求中,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了使用fileReader的一個(gè)坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-12-12
這篇文章主要給大家介紹了關(guān)于es6中比較有用的7個(gè)技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
說(shuō)明你的Javascript技術(shù)很爛的五個(gè)原因
Javascript在互聯(lián)網(wǎng)上名聲很臭，但你又很難再找到一個(gè)像它這樣如此動(dòng)態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語(yǔ)言。2011-04-04
JS原型prototype和__proto__用法實(shí)例分析
這篇文章主要介紹了JS原型prototype和__proto__用法,結(jié)合實(shí)例形式分析了JS原型prototype和__proto__使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
javascript中，new操作符的工作原理是什么?它是怎樣改變構(gòu)造函數(shù)的返回值和this指向的？下面這篇文章就來(lái)給大家介紹了關(guān)于Javascript中new()到底做了些什么的相關(guān)資料，需要的朋友可以參考下。2018-03-03