接入 Cloudflare 后出现 CORS 错误，通常是因为源站未正确配置跨域响应头，或 Cloudflare 缓存策略导致响应头丢失。优先在源站服务器或应用代码中配置 Access-Control-Allow-Origin，再检查 Cloudflare 缓存规则是否影响了 headers 传递。

快速处理思路

CORS 配置依赖于源站响应，Cloudflare 仅作为传输层。若源站未返回允许跨域的 headers，Cloudflare 无法自动补全。

1. 暂停 Cloudflare 代理（灰云模式），测试直连源站是否报错。
2. 若直连正常，检查 Cloudflare 缓存规则是否缓存了不带 CORS 头的响应。
3. 若直连也报错，修改源站 Web 服务器配置或后端代码，注入 CORS headers。

为什么会这样

浏览器遵循同源策略，要求服务器明确返回 Access-Control-Allow-Origin 头。Cloudflare 作为边缘网络，默认透传源站 headers，但缓存机制可能存储了不含 CORS 头的旧响应。

当多个不同源头的请求命中同一缓存对象时，若未配置 Vary: Origin，后续请求可能获取到错误的缓存响应，导致跨域校验失败。

分步处理

按照以下顺序操作，确保每一步都有明确反馈。

步骤 1：bypass Cloudflare 测试源站

在本地 hosts 文件绑定域名到源站 IP，或直接通过源站 IP 访问接口。若此时出现 CORS 错误，说明问题在源站，与 Cloudflare 无关。

步骤 2：配置源站 CORS

在 Nginx 配置中添加如下片段，允许特定域名或所有域名跨域。

add_header 'Access-Control-Allow-Origin' '$http_origin' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;

注意：若涉及 Cookie 传输，Access-Control-Allow-Origin 不能使用通配符 *，必须指定具体域名。

步骤 3：检查 Cloudflare 缓存设置

登录 Cloudflare dashboard，检查 Cache Rules。确保 OPTIONS 请求不被缓存，或配置 Edge Cache TTL 为 0。

若使用 Page Rules，避免对 API 路径开启 Cache Everything。

怎么验证是否生效

使用 curl 命令模拟跨域请求，检查响应头中是否包含正确的 CORS 字段。

curl -H "Origin: https://your-frontend.com" -I https://your-domain.com/api

观察输出中是否有 Access-Control-Allow-Origin 且值匹配前端域名。同时在浏览器 F12 网络面板查看请求状态码是否为 200 而非 403/500。

常见坑

• 缓存了 OPTIONS 预检请求：导致后续正式请求被浏览器拦截，需在 Cloudflare 中排除 OPTIONS 方法缓存。
• 通配符与 Credentials 冲突：Access-Control-Allow-Origin 设为 * 时，不能同时开启 Allow-Credentials。
• Workers 修改了 headers：若启用了 Cloudflare Workers，检查代码是否意外删除了源站返回的 CORS 头。

常见问题

Cloudflare 会自动帮我加 CORS 头吗？

不会。Cloudflare 默认透传源站 headers，不会主动添加跨域许可，必须在源站配置。

开启 Cloudflare 缓存后 CORS 失效怎么办？

需要在源站响应头中添加 Vary: Origin，告知缓存服务器根据 Origin 字段区分缓存版本。

需要使用 Page Rules 配置 CORS 吗？

不需要。Page Rules 主要用于缓存和重定向，CORS 属于安全响应头，建议在源站统一管理。

参考来源

• Cloudflare 官方文档 - CORS 与缓存行为 (developers.cloudflare.com)
• MDN Web Docs - HTTP 访问控制 (CORS) (developer.mozilla.org)