面试官:说说你对 options 请求的理解
什么是 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-Allow-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
最后
欢迎加我微信(winty230),拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
原创不易,点个在看支持我吧
面试官:说说你对 options 请求的理解相关推荐
- 面试官:给我说一下你理解的分布式架构
转载自 面试官:给我说一下你理解的分布式架构 # 什么是分布式架构 分布式系统(distributed system) 是建立在网络之上的软件系统. 内聚性:是指每一个数据库分布节点高度自治,有本地 ...
- 岗位理解_当面试官问求职者对应聘岗位的理解情况
虽然求职是看的是岗责是否匹配自己的经历和能力,但是很多面试官还是会问这样的问题.对于求职者来说,对岗位的理解其实就是把岗位职责背一遍,但是面试官既然问了,就要说出一些其他内容来.想回答好这个问题,就要 ...
- 精选(26)面试官:讲讲你对ThreadLocal的理解
前言 在面试环节中,考察"ThreadLocal"也是面试官的家常便饭,所以对它理解透彻,是非常有必要的. 有些面试官会开门见山的提问: "知道ThreadLocal吗? ...
- java option请求_面试官:说说你对 options 请求的理解
什么是 options 请求 我们可以看下 MDN 中的一段描述: ★ HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项.客户端可以对特定的 URL 使用 OPTIONS 方法,也 ...
- 面试官:说说Kafka处理请求的全流程
今天来讲讲 Kafka Broker端处理请求的全流程,剖析下底层的网络通信是如何实现的.Reactor在kafka上的应用. 再说说社区为何在2.3版本将请求类型划分成两大类,又是如何实现两类请求处 ...
- 程序员过关斩将--面试官再问你Http请求过程,怼回去!
Http介绍 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为了提 ...
- 面试官问:跨域请求如何携带cookie?
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列 ...
- 面试官:说说你对vue的理解?
一.web发展历史 Web是World Wide Web的简称,中文译为万维网 我们可以将它规划成如下的几个时代来进行理解 石器时代 文明时代 工业革命时代 百花齐放时代 石器时代 石器时代指的就是我 ...
- 原来腾讯面试题也不难,面试官:给我说一下你理解的分布式架构?
什么是分布式架构 分布式系统(distributed system) 是建立在网络之上的软件系统. 内聚性:是指每一个数据库分布节点高度自治,有本地的数据库管理系统. 透明性:是指每一个数据库分布节点 ...
- 面试官:谈谈你对零拷贝的理解~
点击上方 好好学java ,选择 星标 公众号重磅资讯,干货,第一时间送达 今日推荐:14 个 github 项目!个人原创100W +访问量博客:点击前往,查看更多 前言 从字面意思理解就是数据不需 ...
最新文章
- 固定table标题头、标题列(兼容多种浏览器)
- hashmap的C++实现
- python之socket
- Linux运维-day3
- c语言简易调度器,给大家分析SD调度器
- cpu高 load 高 内存高 io 高怎么排查
- 面对互联网上的汩汩恶意,如何构建反欺诈体系?
- 移动磁盘此卷不包含可识别的文件系统要怎么找到数据
- 06-ICMP: Internet 控制报文协议
- 一文详解高精地图构建与SLAM感知优化建图策略
- 浅析View的事件分发机制
- ADC采样频率的计算
- 数据结构STL——golang实现前缀基数树radix
- 命名转小驼峰大驼峰中划线
- Java编程基础19——Map集合斗地主案例
- 对基于ubuntu18.04搭建双线adsl路由器和私有云服务器(samba、ftp和http)一文的更正2
- 5G NR - RLC协议阅读笔记 - 从LTE到NR的变化
- rpm提示:XXX conflicts with file form package XXX
- java树结构_Java数据结构:树(Tree)
- 魏晋南北朝:北国飘雪(一)
热门文章
- Android8.1 MTK平台 WLAN热点定制
- JUnit之Rule的使用
- 图片,让PPT富有冲击力(师从于珞珈老师)
- AIDL中should be declared in a file错误
- python翻页爬取豆瓣影评,翻页爬取豆瓣电影名称和评分
- 微信人工客服终于来了,但是「此」微信客服非「彼」微信客服
- RabbitMQ配置文件_修改RabbitMQ MQTT的1883端口
- Codeforces - Mike and Feet
- 生成对抗网络发展及其主要工程应用综述
- access有效性规则不为空值_在设置access有效性规则中,大于0并且小于100怎么写?...