背景

有一个前后端分离的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请求，则该拦截器直接放行。至此，问题完美解决。希望可以帮到有类似问题的小伙伴~

服务网关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信息时,出现了请求失败的情 ...

随机推荐

linux常用命令的介绍

本文主要介绍Linux常用命令工具,比如用户创建,删除,文件管理,常见的网络命令等 如何创建账号: 1. 创建用户 useradd -m username -m 表示会在/home 路径下添加创建用户 ...

在各方面还没准备好的时候，大家一定要慎用border-box样式！！！！

这几天,我被一个js问题困扰到癫狂了! 事情是这样的,我之前写了个功能非常复杂的纯jquery代码的前端gridview控件,实现了大量的功能和效果,在一些项目里也用得很好. 最近有个项目,样式做了调 ...

Hibernate4 执行存储过程

Hibernate3.3.2版本中getSession().connection()已被弃用,hibernate4中官方推荐使用Session doWork()方法进行jdbc操作 当Hibernat ...

python中的commands模块

commands模块用于调用shell命令 有3中方法: commands.getstatus()   返回执行状态 commands.getoutput()   返回执行结果 commands.ge ...

Canvas绘图方法和图像处理方法(转)

转自:http://javascript.ruanyifeng.com/htmlapi/canvas.html 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它 ...

【Java框架型项目从入门到装逼】第十四节 查询用户列表展现到页面

这一节,我们来实现一下用户列表搜索,最终的效果如下: 这边我们要使用easyUI给我们提供的datagrid组件. HTML结构如下

[ SSH框架 ] Spring框架学习之二(Bean的管理和AOP思想)

一.Spring的Bean管理(注解方式) 1.1 什么是注解 要使用注解方式实现Spring的Bean管理,首先要明白什么是注解.通俗地讲,注解就是代码里的特殊标记,使用注解可以完成相应功能. 注解 ...

Nginx负载均衡各种配置方式

Nginx负载均衡 - 小刚qq - 博客园http://www.cnblogs.com/xiaogangqq123/archive/2011/03/04/1971002.html Module ng ...

一、winForm-DataGridView操作——控件绑定事件的两种方法

在winForm窗体中绑定(注册)事件的方法有两种: 一.绑定事件 双击控件,即进入.cs的代码编辑页面,会出现 类似于“ private void 控件名称_Click(object sender, ...

mysql alter修改字段的长度 类型sql语句

在mysql中alter命令可以修改字段类型,长度,名称或一些其它的参数,下面我来给大家介绍alter函数修改字段长度与类型的两个命令,希望文章来给各位带来帮助.     mysql 修改字段长度 a ...