前后端程序员有时候在联调时会有一个疑问，为什么前端自己的代码里面明明没有写过 OPTIONS 类型的请求，但是在网页上调试会多出来这么一个 OPTIONS 请求？

这是因为浏览器在进行跨域请求时，为了确保安全性会多出一个 OPTIONS 请求。这个请求被称为"预检请求"。这个 OPTIONS 请求是由浏览器自动发送的，而不是由前端开发人员手动编写的。在这个请求中，浏览器会携带一些头部字段，比如 Origin、
Access-Control-Request-Method 和
Access-Control-Request-Headers 等，用于向服务器查询跨域请求的配置信息。

下面我们详细讲解下为什么会有这个 OPTIONS 请求。

一、CORS的工作原理

首先，我们需要理解 CORS 的工作原理。

随着 Web 应用程序的不断发展，越来越多的应用需要进行跨域请求，例如客户端 JavaScript 代码向服务器请求数据。 在某些情况下，这是一个安全风险，因为它允许恶意用户通过浏览器发送伪造的请求来攻击服务器。 浏览器为了防止这种攻击，规定了同源策略（同源是指协议、域名和端口都相同），禁止跨域请求。

但有些时候，我们确实需要进行跨域请求。如何解决这个问题呢？

为了帮助开发者解决跨域请求问题，W3C 提供了一个规范，即“CORS”。这个规范引入了一组新的 HTTP 头，通过 HTTP 头信息来告诉浏览器，该请求是可以接受的。

二、简单请求和非简单请求

在 CORS 中，浏览器会将跨域请求分成简单请求和非简单请求两种类型。

简单请求：

1、使用 GET、HEAD、POST 方法之一；

2、请求头 Header 使用 CORS 允许的安全字段：

Accept 、Accept-Language 、Content-Language 、Range 、Content-Type（仅限于 MIME 类型为
application/x-www-form-urlencoded、multipart/form-data、text/plain 时）

对于简单请求，服务器会在响应头中添加
Access-Control-Allow-Origin等相关的信息，告知浏览器该请求可以被接受。因此，对于这种类型的请求，不需要进行OPTIONS预检请求。

非简单请求：

除了上述情况之外的请求都是非简单请求。例如，使用PUT、DELETE、HEAD方法，或者请求头中自定义了一些内容。

对于非简单请求，浏览器会使用 OPTIONS 首先发送一个预检请求，询问服务器是否支持该跨域请求，并请求服务器返回以下信息：

• Access-Control-Allow-Origin - 允许请求的来源域；
• Access-Control-Allow-Methods - 允许使用的 HTTP 方法；
• Access-Control-Allow-Headers - 允许使用的请求头字段；
• Access-Control-Max-Age - 验证结果的有效时间。

例如：

Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 86400

浏览器通过检查 OPTIONS 预检请求的响应头中的字段，判断是否允许当前域名进行请求。如果允许，则继续发送实际请求，否则停止请求。

整个过程如下图：

参考：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

三、为什么需要预检请求？

假设网站 A 是一个视频共享网站，它允许用户上传自己制作的视频，同时支持其他用户对上传的视频进行评论。网站 A 的 API 接口包含两个操作：一个用于上传视频，另一个用于发布评论。这两个操作都需要带上授权信息才能正常执行，如下所示：

上传视频：

POST /api/upload HTTP/1.1
Host: www.siteA.com
Authorization: Token 1234567890
Content-Type: video/mp4
Content-Length: xxx

video binary data...

发布评论：

POST /api/comment HTTP/1.1
Host: www.siteA.com
Authorization: Token 1234567890
Content-Type: application/json
Content-Length: xxx

{
  "video_id": "123",
  "comment": "good video"
}

现在网站 B 的页面需要上传视频并在其中添加评论。为了完成这个操作，网站 B 的页面需要使用 AJAX 跨域请求网站 A 的 API 接口。

然而，由于浏览器的同源策略限制，这个跨域请求将被禁止。

在没有 CORS 框架的情况下，网站 B 的页面只能通过与网站 B 同域名的代理服务器来访问网站 A 的 API 接口。

这种方式可能会引起 代理服务器的负载、网络通信延迟、安全漏洞等问题。

在使用 CORS 框架时，OPTIONS 预检请求的目的在于判断实际请求是否可以被服务器接受，以及可以接受哪些请求头、哪些请求方法等信息。如果服务器允许实际请求，则可以继续发送实际请求，否则停止请求。通过预检请求，可以使网站 B 直接访问网站 A 的 API 接口，无需通过代理服务器转发，避免上述问题的出现，并增强跨域请求的安全性。

四、OPTIONS Header头参数介绍

1、
Access-Control-Allow-Origin

Access-Control-Allow-Origin 用于指定允许跨域请求的源。例如，如果希望允许来自 www.example.com 域名的 AJAX 跨域请求，则可以设置
Access-Control-Allow-Origin 字段如下：

Access-Control-Allow-Origin: http://www.example.com

这个设置的作用是告诉浏览器，允许来自 http://www.example.com 的 AJAX 跨域请求。如果没有这个设置，那么浏览器将不会允许跨域访问。

如果希望允许所有的跨域请求，可以设置
Access-Control-Allow-Origin 为 *，例如：

Access-Control-Allow-Origin: *

但这样会使得服务器变得易受攻击，因此一般不建议这样设置。

2、
Access-Control-Allow-Methods

Access-Control-Allow-Methods 用于指定服务器支持的 HTTP 方法，例如 GET、POST、PUT 等。例如，如果希望服务器支持 GET 和 POST 请求，则可以设置
Access-Control-Allow-Methods 字段如下：

Access-Control-Allow-Methods: GET, POST

这个设置的作用是告诉浏览器，允许使用 GET 和 POST 方法进行跨域请求。如果没有这个设置，那么浏览器将不会允许使用这些方法进行跨域请求。

3、
Access-Control-Allow-Headers

Access-Control-Allow-Headers 用于指定服务器允许的请求头字段。如果客户端带上了不在这个字段中的请求头，则浏览器会拒绝该跨域请求。例如，如果希望服务器允许客户端带上一个自定义的 X-Custom-Header 请求头，则可以设置
Access-Control-Allow-Headers 字段如下：

Access-Control-Allow-Headers: X-Custom-Header

这个设置的作用是告诉浏览器，允许客户端发送包含 X-Custom-Header 请求头的跨域请求。如果没有这个设置，那么浏览器将不会允许带上这个请求头进行跨域请求。

4、Access-Control-Max-Age

Access-Control-Max-Age 用于指定预检请求的有效时间，以避免重复发送预检请求。例如，如果希望指定预检请求的有效时间为 1 天，则可以设置 Access-Control-Max-Age 字段如下：

Access-Control-Max-Age: 86400

这个设置的作用是告诉浏览器，在发送同样的跨域请求时，可以缓存预检请求的结果 1 天。如果没有这个设置，那么每次发送相同的跨域请求时都会再次发送预检请求。

对于本文中的内容，不知道你有没有什么看法，欢迎在评论区里留言。如果你对我的文章内容感兴趣，欢迎点击关注，谢谢支持！