问题

使用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的更多相关文章

  1. http预请求options

    在有很多情况下,当我们在js里面调用一次ajax请求时,在浏览器那边却会查询到两次请求,第一次的Request Method参数是OPTIONS,还有一次就是我们真正的请求,比如get或是post请求 ...

  2. 跨域请求中预检请求options之坑

    一.前言 因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的. 之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会 ...

  3. OPTIONS的预请求(Preflighted Request)

    OPTIONS的预请求(Preflighted Request) Ajax 请求中出现OPTIONS(Request Method: OPTIONS)_qiao-CSDN博客 https://blog ...

  4. HTTP 之 options预请求

    一.HTTP一共有八种常见请求方法 get:参数在url上,浏览器长度有限制,不安全 post:参数不可见,长度不受限制 put:上传最新内容到指定位置 delete:删除请求的url所表示的资源 h ...

  5. cors 预请求

    1.CORS的其他限制 默认允许的方法只有:GET.HEAD.POST默认允许的Content-Type:text/plain.multipart/form-data.applicaton/x-www ...

  6. CORS跨域限制以及预请求验证

    之前我们可以通过“Access-Control-Allow-Origin”,实现跨域请求,那是不是所有跨域请求都可以通过设置Access-Control-Allow-Origin实现跨域请求呢?显然不 ...

  7. AJAX跨域POST发送json时,会先发送一个OPTIONS预请求

    我们会发现,在很多post,put,delete等请求之前,会有一次options请求. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content ...

  8. Postman配置Pre-request scripts预请求对请求进行AES加密

    1.首先,Postman的Pre-request scripts页面右边已经提供了一些模板,这些模板可以设置变量与环境变量,并使用双大括号对变量进行引用 {{info}} 2.对所有POST请求都进行 ...

  9. [转]Ajax跨域请求

    一.编一个服务器端servlet @RequestMapping("/haha") @ResponseBody String haha(String haha, HttpServl ...

随机推荐

  1. git的忽略文件语法规范

    忽略文件语法规范 空行或是以 # 开头的行即注释行将被忽略. 可以在前面添加正斜杠 / 忽略当前路径文件,但不包括子目录的同名文件. 可以在后面添加正斜杠 / 来忽略文件夹. 可以使用 ! 来否定忽略 ...

  2. UVa 12169 Disgruntled Judge 紫书

    思路还是按照紫书,枚举a,得出b, 然后验证. 代码参考了LRJ的. #include <cstdio> #include <iostream> using namespace ...

  3. oracle--表分区、分区索引

    --|/ range分区 create table sale( product_id varchar2(5), sale_count number(10,2) ) partition by range ...

  4. Java学习day7面向对象编程1-对象和类

    一.Java编程中对象和类的概念 1,什么是类? 答:类是客观存在的,抽象的,概念的东西. 2,什么是对象? 答:对象是具体的,实际的,代表一个事物.例如:车是一个类,汽车,自行车就是他的对象. 关于 ...

  5. [常用类]时间内Date、SimpleDateFormat、Calendar类

    Date类的概述是util包下的,不能导入sql包的.* 类 Date 表示特定的瞬间,精确到毫秒. *构造方法 * public Date() * public Date(long date) 如果 ...

  6. 本地部署 Misago Docker + 配置 HTTPS 笔记

    最近答应帮朋友做个论坛网站,想借此机会捡起 Python 在 GitHub 找了一圈,打算借用以 Python+Django 开发的 Misago 这个论坛系统 由于作者在今年更新的 Misago 0 ...

  7. k3 cloud中获取年月日

    日期类型字段元素.Date.Year(获取年) 日期类型字段元素.Date.Month(获取月)日期类型字段元素.Date.Day(获取天)

  8. IO流详解及测试代码

    IO流 (1)IO用于在设备间进行数据传输的操作 (2)分类:    A:流向       输入流 读取数据      输出流 写出数据   B:数据类型     字节流         字节输入流  ...

  9. 第二讲shiro异常及执行流程

    在认证过程中,有一个父异常为:AuthenticationException 该异常有几个子类,分别对应不同的异常情况: (1)DisabledAccountException:账户失效异常 (2)E ...

  10. MySQL 保存镜像实战操作( 拷贝方法 )

    查看数据保存的位置 docker inspect --format='{{.Mounts}}' mxg_mysql 容器路径为:`/var/lib/mysql` ,宿主机数据保存在: /var/lib ...