http预请求 options
问题
使用axios请求接口时,出现了发出两次请求的情况;一个是请求OPTIONS,一个是正常的POST请求;查资料发现与跨域请求有关。
概念
MDN中有提到:
出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。
跨域资源共享标准允许在下列场景中使用跨域 HTTP 请求:
- 前文提到的由
XMLHttpRequest
或 Fetch 发起的跨域 HTTP 请求。 - Web 字体 (CSS 中通过
@font-face
使用跨域字体资源), 因此,网站就可以发布 TrueType 字体资源,并只允许已授权网站进行跨站调用。 - WebGL 贴图
- 使用
drawImage
将 Images/video 画面绘制到 canvas - 样式表(使用 CSSOM)
而在页面中通过src或者href嵌入cdn文件或者图片之类的可以直接引入不会遵循CORS。
跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET
以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST
请求),浏览器必须首先使用 OPTIONS
方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。
简单请求不会触发CORS预检请求,而非简单请求则会触发
若请求满足所有下述条件,则该请求可视为“简单请求”,否则为非简单请求:
- 使用下列方法之一:GET POST HEAD
- Fetch 规范定义了对 CORS 安全的首部字段集合,不得人为设置该集合之外的其他首部字段。该集合为:
Accept
Accept-Language
Content-Language
Content-Type
()DPR
Downlink
Save-Data
Viewport-Width
Width
Content-Type
的值仅限于下列三者之一:text/plain
multipart/form-data
application/x-www-form-urlencoded
- 请求中的任意
XMLHttpRequestUpload
对象均没有注册任何事件监听器;XMLHttpRequestUpload
对象可以使用XMLHttpRequest.upload
属性访问。 - 请求中没有使用
ReadableStream
对象。
解决办法
检查多余的请求头部:后台管理统有登录用户,登录后请求接口都会加一个自定义的头部token,每次请求都会带上让后台校验是否为当前用户或者token是否过期,当删除请求的token时,没有出现预请求。正常请求一次,加上token则会再次出现两次请求。
axios设置默认的Content-type为简单请求规定的三者之一。
引入qs模块,axios请求时添加qs序列化
后台设置 Access-Control-Max-Age(number) 。数值代表preflight request (预检请求)的返回结果(即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息) 可以被缓存多久,单位是秒。
例如:将预检请求的结果缓存10分钟(但该方法第一次请求还是会发起一次option)
Access-Control-Max-Age: 600
http预请求 options的更多相关文章
- http预请求options
在有很多情况下,当我们在js里面调用一次ajax请求时,在浏览器那边却会查询到两次请求,第一次的Request Method参数是OPTIONS,还有一次就是我们真正的请求,比如get或是post请求 ...
- 跨域请求中预检请求options之坑
一.前言 因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的. 之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会 ...
- OPTIONS的预请求(Preflighted Request)
OPTIONS的预请求(Preflighted Request) Ajax 请求中出现OPTIONS(Request Method: OPTIONS)_qiao-CSDN博客 https://blog ...
- HTTP 之 options预请求
一.HTTP一共有八种常见请求方法 get:参数在url上,浏览器长度有限制,不安全 post:参数不可见,长度不受限制 put:上传最新内容到指定位置 delete:删除请求的url所表示的资源 h ...
- cors 预请求
1.CORS的其他限制 默认允许的方法只有:GET.HEAD.POST默认允许的Content-Type:text/plain.multipart/form-data.applicaton/x-www ...
- CORS跨域限制以及预请求验证
之前我们可以通过“Access-Control-Allow-Origin”,实现跨域请求,那是不是所有跨域请求都可以通过设置Access-Control-Allow-Origin实现跨域请求呢?显然不 ...
- AJAX跨域POST发送json时,会先发送一个OPTIONS预请求
我们会发现,在很多post,put,delete等请求之前,会有一次options请求. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content ...
- Postman配置Pre-request scripts预请求对请求进行AES加密
1.首先,Postman的Pre-request scripts页面右边已经提供了一些模板,这些模板可以设置变量与环境变量,并使用双大括号对变量进行引用 {{info}} 2.对所有POST请求都进行 ...
- [转]Ajax跨域请求
一.编一个服务器端servlet @RequestMapping("/haha") @ResponseBody String haha(String haha, HttpServl ...
随机推荐
- CGI 环境变量
CGI 环境变量 环境变量 意义 SERVER_NAME CGI脚本运行时的主机名和IP地址. SERVER_SOFTWARE 你的服务器的类型如: CERN/3.0 或 NCSA/1.3. GATE ...
- C++ 全面刨析使用指针方法 _new _delete
指针 #include<iostream> using namespace std; int main() { ; int* pn;//声明 int* pn = &avr;//初始 ...
- 实验报告一&第三周学习总结
一.实验报告 1.打印输出所有的"水仙花数",所谓"水仙花数"是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个"水仙花数" ...
- SQL复制远程数据库数据到本地-及查询结果少显示一列
网上找了查询结果怎么少显示一列,因为数据很多列,结果不是视图就是嵌套,太麻烦,这里用临时表做 exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB', '19 ...
- 使用内核LED框架搭建驱动 ——led_classdev_register
#include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...
- 当系统开启safe_mode和 open_basedir
当系统开启safe_mode和 open_basedir,在程序中使用以下语句curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);并且遇到301,302状态吗时 ...
- 使用absolute实现的后台布局,包括小图标定位,菜单弹出等完整版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AppDomain (转)
AppDomain是CLR的运行单元,它可以加载Assembly.创建对象以及执行程序.AppDomain是CLR实现代码隔离的基本机制. 每一个AppDomain可以单独运行.停止:每个AppDom ...
- Vue-cli2项目文件目录解析
前言 不是原创,真的不是原创,主要我是根据CSDN的一篇文章和其他平台上的文章整理而来,在最后我会贴上所有原文的地址,下面正式进入正文. Vue-cli项目文件目录结构 这个是Vue-cli2.0版本 ...
- linux强制用户下线命令
linux强制用户下线命令 前提:必须是root权限操作:(1)使用who查看目前有哪些用户登录了服务器,见下图(2)使用pkill -kill -t pts/1命令踢出第一个用户.命令解释:pt ...