问题

使用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. CGI 环境变量

    CGI 环境变量 环境变量 意义 SERVER_NAME CGI脚本运行时的主机名和IP地址. SERVER_SOFTWARE 你的服务器的类型如: CERN/3.0 或 NCSA/1.3. GATE ...

  2. C++ 全面刨析使用指针方法 _new _delete

    指针 #include<iostream> using namespace std; int main() { ; int* pn;//声明 int* pn = &avr;//初始 ...

  3. 实验报告一&第三周学习总结

    一.实验报告 1.打印输出所有的"水仙花数",所谓"水仙花数"是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个"水仙花数" ...

  4. SQL复制远程数据库数据到本地-及查询结果少显示一列

    网上找了查询结果怎么少显示一列,因为数据很多列,结果不是视图就是嵌套,太麻烦,这里用临时表做 exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB', '19 ...

  5. 使用内核LED框架搭建驱动 ——led_classdev_register

    #include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...

  6. 当系统开启safe_mode和 open_basedir

    当系统开启safe_mode和 open_basedir,在程序中使用以下语句curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);并且遇到301,302状态吗时 ...

  7. 使用absolute实现的后台布局,包括小图标定位,菜单弹出等完整版

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. AppDomain (转)

    AppDomain是CLR的运行单元,它可以加载Assembly.创建对象以及执行程序.AppDomain是CLR实现代码隔离的基本机制. 每一个AppDomain可以单独运行.停止:每个AppDom ...

  9. Vue-cli2项目文件目录解析

    前言 不是原创,真的不是原创,主要我是根据CSDN的一篇文章和其他平台上的文章整理而来,在最后我会贴上所有原文的地址,下面正式进入正文. Vue-cli项目文件目录结构 这个是Vue-cli2.0版本 ...

  10. linux强制用户下线命令

    linux强制用户下线命令   前提:必须是root权限操作:(1)使用who查看目前有哪些用户登录了服务器,见下图(2)使用pkill -kill -t pts/1命令踢出第一个用户.命令解释:pt ...