在前后台分离的项目中,经常会遇到浏览器想服务端发送一个post/patch请求,实际上产生了两个请求,一个是Option,另一个才是真实的Post/Patch请求, 而get请求则不会产生Options请求。

造成此种问题的原因是浏览器处理跨域的机制,下面来掰扯一下为什么会出现Option请求。

Options请求出现的情况有两种:

1、获取后台服务器支持的HTTP的通信方式

2、对跨域请求进行preflight request(预检请求)。

预检请求首先需要向另外一个域名的资源发送一个Http Options的请求头,以检测实际发送的请求是否是安全的。options请求是浏览器自发起的preflight request(预检请求)。

preflight request请求报文中有两个需要关注的首部字段:

(1)Access-Control-Request-Method:告知服务器实际请求所使用的HTTP方法;

(2)Access-Control-Request-Headers:告知服务器实际请求所携带的自定义首部字段。

同时服务器也会添加origin header,告知服务器实际请求的客户端的地址。服务器基于从预检请求获得的信息来判断,是否接受接下来的实际请求。

服务器所返回的Access-Control-Allow-Methods首部字段将所有允许的请求方法告知客户端,返回将所有Access-Control-Request-Headers首部字段将所有允许的自定义首部字段告知客户端。此外,服务器端可返回Access-Control-Max-Age首部字段,允许浏览器在指定时间内,无需再发送预检请求,直接用本次结果即可。

在我们开发过程中出现的浏览器自发起的options请求就是上面的第二种情况。实际上,跨域请求中的”复杂请求”发出前会进行一次方法是options的preflight request。

二、当跨域请求是简单请求时不会进行preflight request,只有复杂请求才会进行preflight request。

跨域请求分两种:简单请求、复杂请求;

符合以下任一情况的就是复杂请求:

1.使用方法put/delete/patch/post;

2.发送json格式的数据(content-type: application/json)

3.请求中带有自定义头部;

其他情况则可理解为是简单请求。

为什么跨域的复杂请求需要preflight request

复杂请求可能对服务器数据产生副作用。例如delete或者put,都会对服务器数据进行修改,所以在请求之前都要先询问服务器,当前网页所在域名是否在服务器的许可名单中,服务器允许后,浏览器才会发出正式的请求,否则不发送正式请求。

Http option 请求是怎么回事的更多相关文章

  1. Http跨域时的Option请求

    写这篇文章时,我们碰到的一个场景是:要给R系统做一个扩展小应用,前端的html.js放在R系统里,后端需要做一个单独的站点N.B.com.这就导致了跨域问题,而且要命的是,后端同学没有权限向招聘的系统 ...

  2. 记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

    我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...

  3. axios添加了header信息后发送的get请求自动编程option请求了

    axios添加了header信息后发送的get请求自动编程option请求了 webpack 代理转发 Provisional headers are shown 在Vue中如何使用axios跨域访问 ...

  4. 浏览器何时发送一个Option请求

    Http Options Method 简而言之,OPTIONS请求方法的主要用途有两个: 1.获取服务器支持的HTTP请求方法: 2.用来检查服务器的性能. CORS(跨域资源共享) CORS是一种 ...

  5. 一个Option请求引发的深度解析

    在当前项目中,前端通过POST方式访问后端的REST接口时,发现两条请求记录,一条请求的Request Method为Options,另一条请求的Reuest Method为Post.想要解决这个疑惑 ...

  6. Ajax 发送OPTION请求

    从fetch说起,用fetch构造一个POST请求. fetch('http://127.0.0.1:8000/api/login', { method: "POST", head ...

  7. 跨域资源共享/option 请求产生原因

    https://blog.csdn.net/hfahe/article/details/7730944

  8. 为什么axios请求接口会发起两次请求

    之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...

  9. 什么是multipart/form-data请求

    根据http/1.1 rfc 2616的协议规定,我们的请求方式只有OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE等,那为为何我们还会有multipart/form-da ...

随机推荐

  1. linux系统创建windows启动盘

    平时工作中用到linux的操作命令较多,因此为了方便,就给电脑装了双系统,一般工作的时候,都选择进入linux系统.但是今天有件工作之外的事情需要解决下:创建一个windows启动盘.如果按照往常来说 ...

  2. Nodepad++中将Tab键替换为空格

    Nodepad++是一个非常优秀的文本编辑工具,本人经常使用其编辑shell脚本,如果不进行设置,Tab键和空格混用,脚本上传到linux后,格式错乱,不容易查看. 设置方式 菜单栏选择"设 ...

  3. 客户端服务器通讯常用的一种方法——Marshal类

    这个类是.NETFramework2.0中的类,所以我们能够将其用于Unity中.与这个类类似的还有litjson等,可能是为了节省字节空间,Marshal类只仅仅将值进行打包成bytes流,而jso ...

  4. Springboot获取resource的路径

    1.获取resource目录下的template路径 String path = Thread.currentThread().getContextClassLoader().getResource( ...

  5. 动态加载、移除css文件

    修改样式有通过修改class属性来更改,也可以通过动态引入外部的css文件来改变对应的样式展示. 这里就介绍动态引入.移除css文件 ///添加平板样式文件 function loadStyles() ...

  6. 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_8 响应json数据之响应json格式数据

    springMvc的框架已经帮我们做好了.发过来的数据转换为javaBean对象 发过来的键值的形式,如果属性和javaBean对应的话,可以直接封装到对象中. key做额外的转换的时候,需要另外的j ...

  7. 进程分配内存的两种方式--brk() 和mmap()(不设计共享内存)(转)

    如何查看进程发生缺页中断的次数? 用ps -o majflt,minflt -C program命令查看. majflt代表major fault,中文名叫大错误,minflt代表minor faul ...

  8. 七十五:flask.Restful之Restful.API介绍

    restful api是用于在前端与后台进行通信的一套规范,使用这个规范可以让前后端开发变得更加轻松 协议:http或者https 数据传输格式:使用json url链接:url链接中不能有动词(/g ...

  9. 远程发送文件失败(scp)

    出现这种情况的原因是之前保存过192.168.210.134的密钥. 碰到这种情况进行如下操作: ①查看隐藏文件 [root@localhost ~]# ls -a    .ssh ②切换到 .ssh ...

  10. thinkphp6.0 nginx 配置

    location / {     index index.php;     #如果文件不存在则尝试TP解析     if (!-e $request_filename) {        rewrit ...