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 ... 
随机推荐
- git的忽略文件语法规范
			忽略文件语法规范 空行或是以 # 开头的行即注释行将被忽略. 可以在前面添加正斜杠 / 忽略当前路径文件,但不包括子目录的同名文件. 可以在后面添加正斜杠 / 来忽略文件夹. 可以使用 ! 来否定忽略 ... 
- UVa 12169 Disgruntled Judge 紫书
			思路还是按照紫书,枚举a,得出b, 然后验证. 代码参考了LRJ的. #include <cstdio> #include <iostream> using namespace ... 
- oracle--表分区、分区索引
			--|/ range分区 create table sale( product_id varchar2(5), sale_count number(10,2) ) partition by range ... 
- Java学习day7面向对象编程1-对象和类
			一.Java编程中对象和类的概念 1,什么是类? 答:类是客观存在的,抽象的,概念的东西. 2,什么是对象? 答:对象是具体的,实际的,代表一个事物.例如:车是一个类,汽车,自行车就是他的对象. 关于 ... 
- [常用类]时间内Date、SimpleDateFormat、Calendar类
			Date类的概述是util包下的,不能导入sql包的.* 类 Date 表示特定的瞬间,精确到毫秒. *构造方法 * public Date() * public Date(long date) 如果 ... 
- 本地部署 Misago Docker + 配置 HTTPS 笔记
			最近答应帮朋友做个论坛网站,想借此机会捡起 Python 在 GitHub 找了一圈,打算借用以 Python+Django 开发的 Misago 这个论坛系统 由于作者在今年更新的 Misago 0 ... 
- k3 cloud中获取年月日
			日期类型字段元素.Date.Year(获取年) 日期类型字段元素.Date.Month(获取月)日期类型字段元素.Date.Day(获取天) 
- IO流详解及测试代码
			IO流 (1)IO用于在设备间进行数据传输的操作 (2)分类: A:流向 输入流 读取数据 输出流 写出数据 B:数据类型 字节流 字节输入流 ... 
- 第二讲shiro异常及执行流程
			在认证过程中,有一个父异常为:AuthenticationException 该异常有几个子类,分别对应不同的异常情况: (1)DisabledAccountException:账户失效异常 (2)E ... 
- MySQL 保存镜像实战操作( 拷贝方法 )
			查看数据保存的位置 docker inspect --format='{{.Mounts}}' mxg_mysql 容器路径为:`/var/lib/mysql` ,宿主机数据保存在: /var/lib ... 
