1

最近完成了一个番茄闹钟webApp：WJW-番茄土豆，小伙伴在帮忙测试bug的时候发现浏览器每次发送正式请求之前，都会发送一个OPTIONS请求：

2

2.1 什么是OPTIONS请求？

CORS MDN是这么描述的

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

2.2 哪些请求会发送options请求？

这里就要说说请求的分类：简单请求和预检请求。
简单请求：满足以下几种情况（日常开发基本上只会注意前两种）

预检请求：满足以下几种情况

请求附带身份凭证 >. cookies

2.3 OPTIONS请求有什么？

1. 预检请求头request header的关键字段：
   Access-Control-Request-Method：告诉服务器实际请求所使用的 HTTP 方法
   Access-Control-Request-Headers：告诉服务器实际请求所携带的自定义首部字段

服务器基于从预检请求头部获得的信息来判断，是否接受接下来的实际请求。

2. 预检响应头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.4 OPTIONS请求是否可以优化？

当然是可以的：

1. OPTIONS预检请求的结果可以被缓存

2. 避免触发
   参考2.2 哪些请求会发送options请求？ ，通过设置请求（比如三种Content-Type）来避免触发预检请求。