OPTIONS 请求引发的分析

阅读提纲：

• 为什么会出现 OPTIONS 请求？
• 什么情况下会出现 OPTIONS 请求？
• OPTIONS 请求会发送什么内容？

跨域前端访问后端时，所有的 Ajax HTTP 请求都会先发送一个 OPTIONS 请求，接下来再发送真实请求。图略。

那么问题来了：为什么会出现 OPTIONS 请求？什么情况下会出现 OPTIONS 请求？OPTIONS 请求会发送什么内容？

 

• 为什么会出现 OPTIONS 请求？

当 HTTP 请求跨域时，浏览器会自动先发送一个 OPTIONS 请求（预检请求，preflight request）到相同的目标地址，目的是获知服务端是否允许浏览器发送该跨域请求，因为某些 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求）可能对服务器数据产生副作用。

 

什么是跨域？

当请求端和目标端的 URL 的协议或域名或端口有任意一项不一致，则该请求跨域。

比如下表中的 URL1 和 URL2 都属于跨域：

 

URL1	URL2	原因
http://localhost/	https://localhost/	协议不同
http://localhost/	http://127.0.0.1/	域名不同
http://localhost:80/	http://localhost:81/	端口不同

 

 

• 什么情况下会出现 OPTIONS 请求？

其实发送 OPTIONS 请求还是有一定条件的。当请求满足下述任一条件时，即应首先发送预检请求：

1、使用了下面任一 HTTP 方法：

PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH

2、人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：

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

4、请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器。
5、请求中使用了ReadableStream对象。

 

• OPTIONS 请求会发送什么内容？

OPTIONS 请求发送的请求信息如下图所示：

 

其中最重要的是：

Access-Control-Request-Method: GET
Access-Control-Request-Headers: accesstoken, refreshtoken

 

其中：

“Access-Control-Request-Method”指令告诉服务器实际发送的请求方法是“GET”，“Access-Control-Request-Headers”指令告诉服务器实际发送的请求头会包含这两个字段。

 

如果服务器同意接收客户端这个请求，就会返回如下两个字段：

Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: accesstoken, refreshtoken

 

如果服务器允许客户端的域访问，则会返回如下字段（假设客户端的域是 http://loclahost.cn）：

Access-Control-Allow-Origin: http://localhost.cn

 

如果服务器允许客户端携带凭证（比如会话ID等 COOKIE 信息），则会返回如下字段：

Access-Control-Allow-Credentials: true

 

参考：

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests