理解预检请求：CORS 中的关键机制

理解预检请求：CORS 中的关键机制

跨源资源共享（CORS）在现代网络开发中扮演着重要角色，而预检请求（Preflight Request）则是 CORS 的核心组成部分之一。本文将深入解析预检请求的概念，并通过一个实际例子来展示它的工作原理。

预检请求的概念

预检请求是浏览器在执行跨源 HTTP 请求之前自动发起的一种特殊请求。其目的是为了保证安全性，确保跨源请求不会对服务器造成安全威胁。当一个跨源请求包含某些特定的条件时（如非简单请求），浏览器会首先发送一个 OPTIONS 类型的 HTTP 请求到目标服务器，询问服务器是否允许该跨源请求。

预检请求的触发条件

预检请求主要在以下情况下触发：

• 使用除 GET、HEAD、POST 之外的 HTTP 方法。
• POST 请求的内容类型（Content-Type）不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。
• 请求包含自定义的头信息。

实际例子

假设一个前端应用尝试发送一个带有自定义头信息的 PUT 请求到另一个域名下的服务器：

fetch("https://api.example.com/data", {
  method: "PUT",
  headers: {
    "X-Custom-Header": "value"
  }
});

在这种情况下，浏览器会先发送一个 OPTIONS 请求到 https://api.example.com/data，询问服务器是否允许跨源的 PUT 请求以及 X-Custom-Header 头信息。如果服务器响应允许，则浏览器继续发送实际的 PUT 请求。

服务器端的响应

在服务器端，对于 OPTIONS 请求的处理通常包括设置以下响应头：

• Access-Control-Allow-Origin: 指定允许访问的源。
• Access-Control-Allow-Methods: 指定允许的 HTTP 方法。
• Access-Control-Allow-Headers: 指定允许的头信息。

例如，服务器可能返回如下响应头：

Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Methods: GET, PUT, POST, DELETE
Access-Control-Allow-Headers: X-Custom-Header

结论

理解并正确处理预检请求是构建现代 Web 应用中的重要一环，它确保了跨域请求的安全性和兼容性。通过有效的预检请求处理，开发者可以灵活控制跨域资源的共享，同时保障应用的安全性。