跨域发送OPTIONS请求的条件

smiley121

已于 2024-07-03 23:46:35 修改

阅读量1.2k

点赞数 16

文章标签： http OPTIONS

于 2024-07-03 23:42:25 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44376306/article/details/140164727

版权

一、跨域中的 options 请求

OPTIONS请求即预检请求，可用于检测服务器允许的http方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起OPTIONS请求，即CORS预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。

写项目有时会遇到应用里的ajax请求发送了 2 遍，即多了一次 options 请求。
在这里插入图片描述

1、第1次请求

这里首先发送了一次额外的options请求，在浏览器里看到请求request header 和 response header的信息如下：
（1）预检请求头request header的关键字段：

Request Header	作用
Access-Control-Request-Method	告诉服务器实际请求所使用的 HTTP 方法
Access-Control-Request-Headers	告诉服务器实际请求所携带的自定义首部字段，本次实际请求首部字段中content-type为自定义

服务器基于从预检请求头部获得的信息来判断，是否接受接下来的实际请求。
在这里插入图片描述

（2）预检响应头response header的关键字段：

response header	作用
Access-Control-Allow-Methods	返回了服务端允许的请求，包含GET/HEAD/PUT/PATCH/POST/DELETE
Access-Control-Allow-Credentials	允许跨域携带cookie（跨域请求要携带cookie必须设置为true）
Access-Control-Allow-Origin	允许跨域请求的域名，这个可以在服务端配置一些信任的域名白名单
Access-Control-Request-Headers	客户端请求所携带的自定义首部字段content-type

此次OPTIONS请求返回了响应头的内容，但没有返回响应实体response body内容。
在这里插入图片描述

2、第2次请求

这是本来要发送的请求，如图所示是普通的post请求。其中Content-Type的application/json是此次和后端约定的请求内容格式，这个也是后面讲到为什么会发送options请求的原因之一。
在这里插入图片描述

二、关于OPTIONS请求

从很多资料我们可以了解到使用OPTIONS方法对服务器发起请求，可以检测服务器支持哪些 HTTP 方法。但是这次我们并没有主动去发起OPTIONS请求，那OPTIONS请求为何会自动发起？

1、 OPTIONS请求自动发起

MDN的CORS一文中提到：

规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。

所以这个跨域请求触发了浏览器自动发起OPTIONS请求，看看此次跨域请求具体触发了哪些条件。

2、跨域请求时，OPTIONS请求触发条件

只有在满足一定条件的跨域请求中，浏览器才会发送OPTIONS请求（预检请求）。这些请求被称为“非简单请求”。反之，如果一个跨域请求被认为是“简单请求”，那么浏览器将不会发送OPTIONS请求。

简单请求需要满足以下条件：

只使用以下HTTP方法之一：GET、HEAD或POST。
只使用以下HTTP头部：Accept、Accept-Language、Content-Language、Content-Type。
Content-Type的值仅限于：application/x-www-form-urlencoded、multipart/form-data或text/plain。