可视化解析 CORS

前端

2024-01-27 06:29:32

1. 导言

我们时常在控制台里看到 CORS 错误，为之烦扰不已。今天，让我们拨开云雾，深入探究 CORS 的本质，领略其作为我们忠实伙伴的独特价值。

2. 理解 CORS

跨域资源共享（CORS）是一种浏览器机制，它允许来自一个域的网页向另一个域的服务器发送请求。这种机制是为了解决同源策略而产生的，同源策略规定，浏览器只能向与请求页面相同的域发送请求。

CORS 通过添加额外的 HTTP 头信息来工作。这些头信息告诉服务器，请求来自另一个域，并询问服务器是否允许该请求。如果服务器允许该请求，它将发送一个特殊的 HTTP 头信息，指示浏览器可以继续该请求。

3. 简单请求和预检请求

CORS 请求可以分为两种类型：简单请求和预检请求。

简单请求：不会对服务器产生任何影响的请求，比如 GET、HEAD 和 POST 请求。
预检请求：对服务器产生影响的请求，比如 PUT、DELETE 和 PATCH 请求。

预检请求会在实际请求之前发送到服务器，以询问服务器是否允许该请求。服务器会发送一个特殊的 HTTP 头信息，指示浏览器可以继续该请求。

4. CORS 的工作原理

CORS 通过使用以下 HTTP 头信息来工作：

Origin：请求的源域。
Access-Control-Request-Method：请求的方法（例如 GET、POST、PUT 等）。
Access-Control-Request-Headers：请求的头部。
Access-Control-Allow-Origin：允许请求的源域。
Access-Control-Allow-Methods：允许请求的方法。
Access-Control-Allow-Headers：允许请求的头部。
Access-Control-Max-Age：预检请求的有效期。

当浏览器发送一个跨域请求时，它会先发送一个预检请求。预检请求使用 OPTIONS 方法，并且包含 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 头信息。服务器收到预检请求后，会发送一个特殊的 HTTP 头信息，指示浏览器可以继续该请求。

5. CORS 在行动

下面是一个 CORS 请求的示例：

浏览器发送预检请求：

OPTIONS /api/users HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Content-Type

服务器发送响应：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 3600

浏览器发送实际请求：

GET /api/users HTTP/1.1
Origin: https://example.com
Content-Type: application/json

服务器发送响应：

HTTP/1.1 200 OK
Content-Type: application/json