CORS 问题演示器 - 跨域错误说明

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种浏览器安全机制。浏览器遵循同源策略（Same-Origin Policy），默认禁止网页向不同源（协议、域名、端口任一不同）的服务器发送请求并读取响应。

这是为了防止恶意网站窃取用户在其他网站的数据（如银行信息、邮件等）。CORS 通过特定的 HTTP 响应头，让服务器明确声明允许哪些外部源访问其资源，从而在安全与灵活性之间取得平衡。

关键理解：CORS 限制的是浏览器读取响应，而非请求本身。后端服务器之间的通信不受 CORS 限制。

CORS 错误发生在浏览器端——浏览器检测到跨域响应的响应头不满足要求，于是拦截响应并抛出错误。排查步骤：

1. 打开浏览器 DevTools → Console，查看具体错误信息。
2. 切换到 Network 面板，找到失败的请求，查看响应头。
3. 检查响应中是否包含 Access-Control-Allow-Origin 头。
4. 如果是预检失败，筛选 OPTIONS 请求，检查预检响应。
5. 确认服务端 CORS 配置是否正确（允许的源、方法、头）。

常见错误信息："Access to fetch at '...' from origin '...' has been blocked by CORS policy"

通用原则：在响应中添加 Access-Control-Allow-Origin 等相关头即可。以下是常见框架的配置方式：

• Express.js (Node.js)：使用 cors 中间件，app.use(cors({ origin: 'https://example.com' }))
• Flask (Python)：使用 flask-cors 扩展，CORS(app, origins=['https://example.com'])
• Spring Boot (Java)：使用 @CrossOrigin 注解或全局配置 WebMvcConfigurer
• Nginx：在配置中添加 add_header Access-Control-Allow-Origin *;
• Django：使用 django-cors-headers 包

生产环境建议明确指定允许的源，而非使用通配符 *。

JSONP（JSON with Padding）是 CORS 出现之前的跨域解决方案。它利用 <script> 标签不受同源策略限制的特性，通过动态创建 script 标签来获取数据。

除非需要兼容非常老旧的浏览器，否则应使用 CORS。

这是一个非常常见的困惑。Postman、curl 等工具不受 CORS 限制，因为它们不是浏览器环境。

CORS 是浏览器内置的安全策略，由浏览器强制执行。Postman 是原生应用程序，它直接发送 HTTP 请求并接收响应，不会检查 Access-Control-Allow-Origin 头。

同理，后端服务之间的相互调用也不受 CORS 限制。CORS 只影响浏览器中的 JavaScript 发起的跨域请求。

使用通配符 * 意味着允许任意网站跨域访问该资源。潜在风险包括：

• 数据泄露：任何网站都可以通过 JavaScript 读取该接口的响应数据。
• CSRF 攻击面扩大：攻击者可以更容易地构造跨站请求。
• 无法使用凭证模式：当 Allow-Origin 为 * 时，浏览器不允许携带 Cookie（credentials: 'include' 会报错）。

对于公开的、不涉及用户隐私的 API（如公共数据集），使用 * 是可接受的。对于涉及用户数据的 API，必须指定具体的允许源。

简单请求必须同时满足以下条件：

1. 方法为 GET、HEAD 或 POST
2. 仅使用浏览器自动设置的请求头和少数简单头（Accept、Accept-Language、Content-Language、Content-Type）
3. Content-Type 仅限于 application/x-www-form-urlencoded、multipart/form-data 或 text/plain
4. 未使用 ReadableStream

只要不满足以上任一条件，浏览器就会先发送 OPTIONS 预检请求，向服务器确认是否允许该跨域请求。

常见的触发预检场景：使用 Content-Type: application/json、携带 Authorization 头、使用 PUT/DELETE 方法。

开发阶段的几种快速方案：

• 浏览器插件：使用 "CORS Unblock" 等浏览器扩展（仅限开发测试，不影响他人）。
• 本地代理：使用 Vite/Webpack 的 devServer proxy 功能，将 API 请求代理到目标服务器。
• 启动浏览器时禁用安全策略：chrome --disable-web-security --user-data-dir=/tmp（仅限本地测试，非常危险）。
• 后端临时配置：在开发环境添加宽松的 CORS 头。

⚠️ 警告：切勿在生产环境使用上述不安全的做法！