解决 "CORS error" 及常见的 Access-Control-Allow-Origin 问题：完整指南

如果您曾开发过需要向不同域名的 API 发起请求的 Web 应用，您几乎肯定遇到过令人生畏的“CORS 错误”。它通常在您的浏览器控制台中显示为：

Access to fetch at 'https://api.example.com' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在本指南中，我们将解释 CORS 到底是什么，它为什么存在，以及如何彻底解决这些错误。

1. 常见的 CORS 错误消息

您主要会在浏览器的开发者工具（控制台或网络面板）中看到这些错误：

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present ...
The 'Access-Control-Allow-Origin' header contains multiple values ...
Response to preflight request doesn't pass access control check ...
Method NOT ALLOWED ...（当 POST 或 DELETE 等 HTTP 方法不被 CORS 允许时）

2. 什么是 CORS？

CORS (跨源资源共享) 是浏览器实施的一种安全特性。它防止恶意网站在未经许可的情况下向另一个域名（如您的银行或您的私有 API）发起请求。

默认情况下，浏览器遵循同源策略，这意味着 a.com 上的脚本只能请求 a.com 的数据。CORS 是一种允许 a.com 在 b.com 明确许可的情况下安全请求 b.com 数据的机制。

3. 核心原因与解决方案

3.1 缺少 "Access-Control-Allow-Origin" 头部

这是最常见的错误。它意味着您请求数据的服务器没有告诉浏览器您的域名是被允许访问该资源的。

解决方案: 修复必须在服务器端进行。您需要在响应中添加 Access-Control-Allow-Origin 头部。

针对公共 API: 设置为 *（允许所有）。
针对私有 API: 设置为您的特定域名（例如 https://myapp.com）。

3.2 CORS 预检 (Preflight) 失败

对于“复杂”请求（如带有自定义头部或使用 PUT/DELETE 方法的请求），浏览器会先自动发送一个 OPTIONS 请求。这被称为预检请求。

错误现象: Response to preflight request doesn't pass access control check.

解决方案: 确保您的服务器能够处理 OPTIONS 请求，并返回 200 OK 或 204 No Content 状态，同时带有正确的 CORS 头部：

Access-Control-Allow-Origin
Access-Control-Allow-Methods (例如 GET, POST, OPTIONS, PUT, DELETE)
Access-Control-Allow-Headers (例如 Content-Type, Authorization)

3.3 "Access-Control-Allow-Credentials"

如果您在请求中发送了 Cookie 或身份验证头部（withCredentials: true），CORS 规则会变得更加严格。

错误现象: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

解决方案:

您不能在 Access-Control-Allow-Origin 中使用通配符 *。必须指定具体的来源。
您还必须添加头部：Access-Control-Allow-Credentials: true。

4. 如何在不同环境中修复 CORS

4.1 Node.js (Express)

最简单的方法是使用 cors 中间件：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://myapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true
}));

4.2 Nginx

在您的 server 或 location 块中添加以下行：

add_header 'Access-Control-Allow-Origin' 'https://myapp.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

if ($request_method = 'OPTIONS') {
    return 204;
}

4.3 Python (Flask)

使用 flask-cors 扩展：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["https://myapp.com"])

5. 常见问题 FAQ

Q: 我能从前端 (JavaScript) 修复 CORS 错误吗？

答: 不能。 CORS 是由浏览器强制执行的服务器端安全策略。您无法在 JavaScript 代码中“绕过”它。如果您无法控制服务器，您必须使用代理服务器 (Proxy Server) 来代您获取数据。

Q: 为什么我在浏览器中看到 CORS 错误，而在 Postman 中却没有？

答: Postman 是一个独立应用，不是 Web 浏览器。它不强制执行同源策略或 CORS 规则。只有 Web 浏览器（Chrome, Firefox 等）会强制执行 CORS。

Q: 将 Access-Control-Allow-Origin 设置为 "*" 有什么风险？

答: 对于公开数据，没有风险。但是，对于处理用户数据或需要身份验证的 API，设置为 * 会允许任何网站代表已登录用户发起请求，可能导致数据被盗。

6. CORS 常用头部汇总表

头部	说明
`Access-Control-Allow-Origin`	指定允许访问资源的域名。
`Access-Control-Allow-Methods`	指定允许的 HTTP 方法（GET, POST 等）。
`Access-Control-Allow-Headers`	指定允许发送的自定义头部。
`Access-Control-Allow-Credentials`	指示当 credentials 标志为 true 时是否可以共享响应。
`Access-Control-Max-Age`	指定预检请求结果的缓存时间。

解决 'CORS error' 及常见的 Access-Control-Allow-Origin 问题