HI,我是石小石~
如果你经常使用浏览器的控制台查看接口请求，一定对下面的OPTIONS 请求不陌生。
你可能会有疑问，我的代码里明明没有写 OPTIONS 请求，浏览器为什么会有这样一个请求记录。其实，这是浏览器内置的一种安全机制------预检请求（Preflight Request） 。
什么是预检请求
CORS 预检请求 用于检查服务器是否支持 CORS 协议，并且是否允许使用特定的方法和标头。它通常是一个带有以下标头的 OPTIONS 请求：
正常情况下，作为前端开发者，我们不需要自己去发这样的请求。当浏览器检测到即将发出的跨域请求不够"安全"时，才会先向目标服务器"打个招呼"，确认对方是否允许再继续。
这个过程就好比你去坐地铁：
- 简单请求：带个水杯进地铁，安检员看一眼放行（不触发预检）。
- 非简单请求：带了大包裹（复杂请求），安检员会让你先过一遍安检机（触发预检）。
安检确认没问题后，才允许你真正进入。
什么时候会触发预检请求
对于"简单请求"，浏览器不会触发预检机制，所谓"简单请求"，满足以下条件即可：
- 方法 ：仅限
GET、HEAD、POST - 请求头 ：仅限
Accept、Accept-Language、Content-Language，以及Content-Type（且值只能是application/x-www-form-urlencoded、multipart/form-data或text/plain）
一旦超出上述范围，就会触发预检。比如：
- 使用了
PUT、DELETE、PATCH等方法 - 请求头里加了
Authorization、X-Custom-Header、Content-Type: application/json - 请求需要携带 Cookie 或其他认证信息（
withCredentials=true）
预检请求的实际流程
我们通过一个案例来查看预检请求的工作流程。
假设，我们的网页有一个新增功能，点击后会调用POST 接口。
点击按钮后，客户端会在实际发送 post请求之前，先向服务器发起预检请求，用于询问是否可以向服务器发起 post 请求：
如果服务器允许，那么服务器就会响应这个预检请求。并且其响应标头 Access-Control-Allow-Methods 会将 POST 包含在其中：
预检响应可以通过类似上面的例子中的 Access-Control-Max-Age 标头来缓存，以便在同一个 URL 下创建的请求中使用。
为了缓存预检响应，浏览器使用一个特定的缓存，这个缓存是与浏览器管理的一般 HTTP 缓存分开的。预检响应永远不会被缓存在浏览器的一般 HTTP 缓存中。
如何在控制台过滤预检请求
预检请求是浏览器的一种安全机制，无法取消。如果触发次数过多，可能会在排查问题时带来干扰。
在 Chrome DevTools 的 Network 面板中，我们可以通过下面两种方式过滤：
- 输入
-method:OPTIONS来过滤掉 OPTIONS 请求，只看其他请求； - 或直接点击 Fetch/XHR 按钮，快速隐藏无关请求。
