浅谈在fetch方法中添加header后遇到的预检请求问题


Posted in Javascript onAugust 31, 2017

今天在使用fetch方法

fetch('xxx.com',{header:{bbbbbbb:111}})

浏览器返回的请求信息中,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

而该次请求的Request Method也变成了OPTION,不论是生成的奇怪请求头,还是OPTION方法,都是没有遇见过的。

这次请求与平时开发中发送的请求有以下几点不同

1.该次请求对象网站是跨域地址

2.本次请求添加的请求头服务端不会获取

遂根据浏览器返回的请求信息字段名进行查询,查询得知

access-control-request-headers:bbbbbbbbbbb
access-control-request-method:GET

名为预检头,是CORS请求中用于向服务端发送请求时获取准许的一个步骤。服务端的回应主要在Response 中的Access-Control-Allow-Origin字段体现。

具体相关信息可以查阅MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

以上这篇浅谈在fetch方法中添加header后遇到的预检请求问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS操作图片(增,删,改) 例子
Apr 17 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
浅谈Vue的响应式原理
May 30 Javascript
微信小程序选择图片控件
Jan 19 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
浅谈vue的踩坑路
Aug 31 #Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 #Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 #Javascript
基于JSON数据格式详解
Aug 31 #Javascript
浅谈js中的this问题
Aug 31 #Javascript
js实现图片放大展示效果
Aug 30 #Javascript
详解js几个绕不开的事件兼容写法
Aug 30 #Javascript
You might like
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
奇妙的js
2007/09/24 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
深入理解vue Render函数
2017/07/19 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
基于python实现查询ip地址来源
2020/06/02 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
syb养殖创业计划书
2014/01/09 职场文书
餐饮加盟计划书
2014/01/10 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
2021年最新用于图像处理的Python库总结
2021/06/15 Python