为什么请求会发送两次-预检请求opition

我们都知道cors请求分类两类：简单请求get,post,option；其他是复杂请求。详情查看 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

场景：很多时候发送一个post请求，结果却显示两个请求（一个option请求，一个post请求）

一、什么是options请求

OPTIONS请求即预检请求，用来检测服务器允许的http方法。

总共会发送两次请求。当发起跨域请求时，出于安全考虑，达到一定条件，会触发浏览器在正式请求之前，自动先发起OPTIONS请求，也就是第一次请求。

服务器若接受此次跨域请求，那么当options请求成功返回后，浏览器继续发起第二次请求，也就是真正的ajax请求。

二、跨域请求触发的条件

1、http方法：PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH

2、首部字段除以下字段：Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width

3、Content-Type除以下字段：application/x-www-form-urlencoded、multipart/form-data、text/plain

注：通常是content-type: application/json

Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法。

Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。

预检，返回响应头，没返回实体内容

原文地址：https://www.cnblogs.com/renzm0318/p/12019321.html

时间： 2024-10-03 22:38:23

为什么请求会发送两次-预检请求opition的相关文章

CORS预检请求详谈

引言最近在项目中因前后端部署不同地方,前端在请求后端api时发生了跨域请求,我们采用CORS(跨域资源共享)来解决跨域请求,这需要前后端的配合来完成.在这一过程中,后端支持了CORS跨域请求后,前端的请求配置可能会调起CORS的preflight请求,也就是我们所说的预检请求.对CORS不太熟悉的可能会很容易忽视掉这个问题.下面就来说说CORS的preflight请求.CORS的基本用法不在本文讨论中,可以参考阮老师的跨站资源共享CORS详解. CORS prefligt请求 prefligh

cors跨域之简单请求与预检请求（发送请求头带令牌token）

跨域浏览器请求应该是可以发出的,服务器不响应这种请求,同时跨域标准还要求浏览器不接受不同域名的服务器发来的响应.个人猜测预检请求(option):在 CORS 中,可以使用 OPTIONS 方法发起一个预检请求(一般都是浏览检测到请求跨域时,会自动发起),以检测实际请求是否可以被服务器所接受.预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法:Access-Control-Request-Headers 首部字段告知

preflight request预检请求

preflight request预检请求,负责检查是否允许跨域请求,但是注意并不是所有的跨域请求都会发送preflight请求.对与那些幂等的请求,如GET请求,就不会发送preflight请求.只有那些会改变服务器状态的请求才可能发送preflight请求,如果POST.DELETE和PUT请求. preflight请求是一个OPTIONS请求,由浏览器自动发送,前端开发者不会意识到它的存在.preflight请求必须有这三个请求头Access-Control-Request-Method.

CORS跨域请求限制-options预检请求

1 var express = require("express"); 2 var app = express(); 3 4 // app.get("/a", function(req,res){ 5 // // 设置" * "号表示允许任何域名来源的请求 6 // res.setHeader('Access-Control-Allow-Origin', '*'); 7 // res.json({"a":100}); 8 //

处理跨域Options预检请求

//处理跨域Options预检请求 if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){ //允许的源域名 header("Access-Control-Allow-Origin: *"); //允许的请求头信息 header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization"); //允许的请求

在fetch方法中添加header后遇到的预检请求问题

今天在使用fetch方法 fetch('xxx.com',{header:{bbbbbbb:111}}) 浏览器返回的请求信息中,header变成了 :authority:koss.nocorp.me :method:OPTIONS :path:/?a=1 :scheme:https accept:*/* accept-encoding:gzip, deflate, br accept-language:zh-CN,zh;q=0.8 access-control-request-headers:

vue 中使用 axios 请求接口，请求会发送两次问题

在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后面经过查证资料发现: 如果只是普通的 ajax 请求,也不会发起这个请求,只有当 ajax 请求绑定了 upload 的事件并且跨域的时候,就会自动发起这个请求了.这样就很显然了,我们有 upload 事件绑定(一般都是本地调试,所以会有跨域),看了下 axios 文档,发现config配置文件中有

Axios 执行post发送两次请求的小坑

vue-resource2.0已经不再更新,所以vue2.0官方推荐使用axios来代替.实际项目也是应用上了vue+axios,然后就有了这么一段填坑的经历. 问题:axios使用post请求时,发送了两次,而get则正常.第一次请求不是正确的post请求,第二次才是正确的调出谷歌开发者工具 image.png "Request Method: OPTIONS"什么鬼,post请求时,这里的"Request Method"居然不是post,而是这个OPTIONS

axios发送两次请求原因及解决方法

axios发送两次请求原因及解决方法最近Vue项目中使用axios组件,在页面交互中发现axios会发送两次请求,一种请求方式为OPTIONS,另外一种为自己设置的. 如图: 什么是CORS通信? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制. CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏