AJAX请求中出现OPTIONS请求
背景
有一个前后端分离的VUE项目来发送ajax
请求, 查看Nginx
日志或使用Chrome Dev Tools
查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求, 无论API要求请求的方法是GET或POST.
为什么会发送这个OPTIONS请求? 困扰了项目组的前端同学和后端同学很久,今天正好听他们说起这个问题,就研究了一下原理。
过程
首先, 在js代码里是没写要发送OPTIONS请求的, 后台API要的请求方法不是GET就是POST, 也只发送过这两种类型的请求.
那么, 我就以为是前台调用方式的问题, 于是去看了看代码. 发现并没有什么很特殊的地方。然后直接看ajax.js
文件. 结果, 发现一切正常, 并没有这种逻辑: 发送GET/POST请求之前, 先发送一个OPTIONS请求.
看来就不是前端同学写法的问题,也不是ajax的问题,仔细对比了一下之前的代码,发现唯一的区别就是ajax中用到了自定义的header头。
解惑
众所周知, ajax请求是由XMLHttpRequest
对象实现的(部分低版本ID浏览器不是), 而XMLHttpRequest
会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制。
那么, 允许跨域, 不就是服务端(例如Nginx或者后端代码)设置Access-Control-Allow-Origin: *
就可以了吗?
普通的请求确实是这样子的, 除此之外, 还一种叫请求叫Preflighted Request(带预检的跨域请求)
Preflighted Request在发送真正的请求前, 会先发送一个方法为OPTIONS的预请求(Preflighted Request), 用于试探服务端是否能接受真正的请求.
如果options获得的回应是拒绝性质的,比如404\403\500等http状态,就会停止post、get等请求的发出。
那么, 什么情况下请求会变成Preflighted Request呢? 翻看了MDN的文档发现如下:(文档地址:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#The_HTTP_request_headers)
- 请求方法不是GET/HEAD/POST
- POST请求的
Content-Type
并非application/x-www-form-urlencoded
,multipart/form-data
, 或text/plain
- 请求设置了自定义的
header
字段
举个例子, 如果POST请求要传输的数据为 XML文档, Content-Type
为application/xml
或text/xml
, 则发送这个请求前会发送一个预请求,或者自定义的header字段也是一样的道理。
有了上面的知识点, 再去看项目中ajax调用
可以看出, 跨域请求中设置了自定义的header
字段, 所以该请求是preflighted request
, 则请求前一定会发送一个OPTIONS作为预请求.
所以说, 在项目中ajax对后台API的调用, OPTIONS请求是没办法去掉的, 除非后台接口不再需要在请求header
中设置openId
但是由于该项目中用户信息是采用的JWT的方式,所以只好作罢。
但是由于该项目在后台中自定义了请求频率限制的拦截器,例如限制同一个客户端一秒内对某一个接口只能访问1次。如果超过限制,则第二次会返回状态码500,不予处理。如果每次请求前都带着一次OPTIONS请求,则该拦截器无法正常实现功能,反正会导致大批接口调用失败的情况。
鉴于上述分析,既然前端发起请求时OPTIONS请求没有办法去除,那么是否可以考虑从后台拦截器进行改造。
改造后的代码如下:
如果拦截到的请求不是项目中常规的GET或者POST请求,则该拦截器直接放行。至此,问题完美解决。希望可以帮到有类似问题的小伙伴~
AJAX请求中出现OPTIONS请求的更多相关文章
- 服务网关ZuulFilter过滤器--如何解决跨域请求中的OPTIONS请求
进行跨域请求的时候,并且请求头中有额外参数,比如token,客户端会先发送一个OPTIONS请求 来探测后续需要发起的跨域POST请求是否安全可接受 所以这个请求就不需要拦截,下面是处理方式 @Ove ...
- Http中的options请求
引自:https://www.jianshu.com/p/5cf82f092201.https://www.cnblogs.com/mamimi/p/10602722.html 一.options是什 ...
- HTTP协议以及HTTP请求中8种请求方法
HTTP协议以及HTTP请求中8种请求方法 什么是协议? 协议,是指通信的双方,在通信流程或内容格式上,共同遵守的标准. 什么是http协议? http协议,是互联网中最常见的网络通信标准. http ...
- 请求时发送OPTIONS请求
最近在用uni-app开发项目时,发现一个之前没注意到的点,当我发送POST请求的时候,在NetWork可以看到在发送正式的POST请求时,会先发送一个OPTIONS请求,OPTIONS请求后才会发送 ...
- HTTP协议---HTTP请求中的常用请求字段和HTTP的响应状态码及响应头
http://blog.csdn.net/qxs965266509/article/details/8082810 用于HTTP请求中的常用请求头字段 Accept:用于高速服务器,客户机支持的数据类 ...
- postman简单教程,如何在请求中引用上次请求返回的值
做接口测试,一定会遇到这种情况,需要拿上次请求的值在本次请求中使用,比如,我们去测试一个东西,要去登录才能做其他的操作,需要拿到登录返回数据中的某些字段,比如,token啊等... 如果发一次请求,就 ...
- postman的关联,即如何在请求中引用上次请求返回的值
做接口测试,一定会遇到这种情况,需要拿上次请求的值在本次请求中使用,比如,我们去测试一个东西,要去登录才能做其他的操作,需要拿到登录返回数据中的某些字段,比如,token啊等... 如果发一次请求,就 ...
- 跨域请求中预检请求options之坑
一.前言 因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的. 之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会 ...
- SpringCloud+ZUUL跨域请求中的OPTIONS请求处理
目前项目结构是VUE做前端,后端采用微服务架构,在开发时前端需要跨域请求数据,通过CorsConfig配置解决了简单跨域请求需要.但当需要在请求的header中增加token信息时,出现了请求失败的情 ...
随机推荐
- CURL的学习和应用
curl安装: xp下面的安装 :修改php.ini文件的设置,找到php_curl.dll //取消下在的注释extension=php_curl.dll linux下面安装: # wget htt ...
- 使用 BEGINCONTENT() 和 ENDCONTENT() 设定 YII 的 LAYOUTS
Yii 的 views/layouts 是用来放置 layouts 的目录,在默认的情况下会有 main.php 和 column1.php 和 column2.php. main.php 内容定义了 ...
- 搭建高可用mysql系列(2)-- Percona XtraDB Cluster 安装
本文主要介绍在 centos 下 Percona XtraDB Cluster(下文简称PXC) 的安装, 个人的系统版本信息如下: [root@c2-d09 worker]# more /etc/r ...
- 新浪微博资深大牛全方位剖析 iOS 高级面试
第1章 课程简介本章对这门课程所讲述内容进行概要介绍,其中包括课程目标.适合人群,课程特色.课程收获.课程安排等.整个课程学习完结后,有机会获得电话模拟面试及内推. 1-1 课前必读(不看会错过一个亿 ...
- jq的innerWidth()遇到的坑
innerWidth()在元素隐藏的时候是取不到值的,但是取到的是元素的内部尺寸,包括padding和content值,,如果元素隐藏了之后他的content就为空,值为0,所以只有等到元素显示之后再 ...
- QoS policy-map class-map
QoS(Quality of ServiceQoS(Quality of Service,服务质量)指一个网络能够利用各种基础技术,为指定的网络通信提供更好的服务能力, 是网络的一种安全机制, 是用来 ...
- java 解析http user-agent 信息
解析http user-agent信息,使用uasparser-0.6.1.jar和jregex-1.2_01.jar两个包 import cz.mallat.uasparser.OnlineUpda ...
- nor flash启动与nand flash启动的区别
1)接口区别:NOR FLASH地址线和数据线分开,来了地址和控制信号,数据就出来.NAND Flash地址线和数据线在一起,需要用程序来控制,才能出数据.通俗的说,就是光给地址不行,要先命令,再给地 ...
- 求Read Depth
如何划窗统计测序数据的reads数(depth):https://blog.csdn.net/shenshenwu666/article/details/80936374 方法1,用samtools ...
- 【转载】MSXML应用总结 概念篇
原文:http://blog.sina.com.cn/s/blog_48f93b530100e9tr.html 微软提供了大量的XML开发工具和技术,而SMXML(Microsoft XML Core ...