Chrome 开发者工具 network 面板里观察到的 Pre

最近我负责处理团队里 Spartacus 和 SmartEdit 集成遇到的一些 ticket，在 Chrome 开发者工具 network 面板里经常观察到一些 Method 值为 preflight 和 OPTIONS 的请求，于是就详细研究了一下。

在 Chrome 开发者工具的 Network 面板里，我们可以观察到各种 HTTP 请求和响应，包括 Prelight 请求（也称为预检请求）和 OPTIONS 请求。在详细讲解这两者之前，我们需要了解跨域资源共享（CORS）的概念。

跨域资源共享（CORS）是一种浏览器安全机制，用于限制网页中的脚本访问与其来源不同的资源。这是为了防止恶意网站执行跨站请求伪造（CSRF）攻击。但在某些情况下，我们需要允许跨域请求，比如在前端应用中调用来自不同域名的 API。此时，CORS 机制就派上用场了。

CORS 通过在 HTTP 请求和响应的头部中添加特定的字段，来控制哪些来源的请求可以访问特定的资源。这就涉及到了 Prelight 请求和 OPTIONS 请求。

Prelight 请求

Prelight 请求（预检请求）是一种 CORS 机制中的概念。在实际跨域请求发出之前，浏览器会先发送一个 Prelight 请求，以检查服务器是否允许此类跨域请求。预检请求主要用于验证服务器是否支持将要发送的实际请求，从而避免在服务器不支持的情况下发送实际请求。这对于那些可能对服务器数据产生副作用的请求尤为重要，例如 PUT、PATCH 或 DELETE 请求。

Prelight 请求使用 OPTIONS 方法，携带以下 HTTP 头部字段：

1. Origin：表示请求来源的域名。
2. Access-Control-Request-Method：表示实际请求将使用的方法（如 GET、POST 等）。
3. Access-Control-Request-Headers（可选）：表示实际请求将携带的自定义头部字段。

服务器收到 Prelight 请求后，会返回一个响应，告诉浏览器是否允许跨域请求。这个响应包含以下 HTTP 头部字段：

1. Access-Control-Allow-Origin：表示允许跨域请求的来源域名，可以是特定域名或通配符 *（表示允许任何域名）。
2. Access-Control-Allow-Methods：表示允许的请求方法，如 GET, POST, PUT 等。
3. Access-Control-Allow-Headers（可选）：表示允许的自定义头部字段。
4. Access-Control-Allow-Credentials（可选）：表示是否允许携带凭证（如 cookie）进行跨域请求。
5. Access-Control-Max-Age（可选）：表示预检请求的缓存时间，单位为秒。在这段时间内，浏览器无需再次发送预检请求。

下面是一个例子：

浏览器收到预检响应后，会根据响应头部字段判断是否允许跨域请求。

Options 请求

OPTIONS请求是一种用于获取服务器支持的HTTP方法和其他功能的请求。它类似于Prelight请求，但不是用于预检授权，而是用于向服务器查询跨域请求的支持信息。

OPTIONS请求的主要目的是与服务器协商交流，了解服务器所支持的请求方法、跨域访问策略和其他相关选项。浏览器通过发送OPTIONS请求来询问服务器，并根据服务器的响应决定是否发送实际的跨域请求。

以下是OPTIONS请求的示例：

• 请求方法：OPTIONS
• 请求头：

Origin：指示请求的源，即发起请求的网页的域

Access-Control-Request-Method：指示实际请求所使用的方法
Access-Control-Request-Headers：指示实际请求所携带的自定义请求头
响应示例：
响应状态：200 OK
响应头：

Access-Control-Allow-Origin：指示允许跨域请求的源
Access-Control-Allow-Methods：指示允许的方法
Access-Control-Allow-Headers：指示允许的自定义请求头

下面是一个 OPTIONS 请求的例子：

通过发送Prelight请求或OPTIONS请求，浏览器可以与服务器进行预检或查询，以获取对跨域请求的授权或了解服务器的支持情况。这种机制有助于确保跨域请求的安全性，并允许不同源之间的数据传输和交互。

需要注意的是，Prelight请求和OPTIONS请求通常是由浏览器自动发起的，并且在正常的前端开发中很少需要手动处理这些请求。但是，了解它们的含义和作用可以帮助开发者更好地理解跨域请求的处理过程和CORS机制的工作原理。