CDN 跨域失败是前端调试中最容易反复踩坑的问题之一。同一个接口在直连源站时一切正常，一旦接入 CDN 就报 CORS 错误，这种现象背后通常不是某个单一配置，而是缓存、边缘规则、请求头处理等多层叠加的结果。本文先帮你理清排查边界，再给出可落地的操作步骤。
先分清：是 CORS 配置问题，还是 CDN 行为问题？
跨域请求失败的本质是浏览器基于同源策略拦截了响应，而 CDN 在其中扮演的角色是中间代理。如果源站已经正确返回了 Access-Control-Allow-Origin 等 CORS 头，但经过 CDN 后这些头丢失或变形，那么问题就出在 CDN 层。反之，如果源站本身就没配置好，CDN 只是背锅。
判断方法很简单：用 curl 分别请求源站和 CDN 的 URL，对比响应头。若源站有而 CDN 没有，则焦点在 CDN；若两者都没有，则先修源站。注意，curl</code 默认不带 Origin 头，需要手动加上，例如：
curl -I -H "Origin: https://your-site.com" https://cdn.example.com/api常见原因一：CDN 缓存了不带 CORS 头的旧响应
这是最常见的原因。CDN 会缓存源站的响应，包括响应头。如果你在源站修复了 CORS 配置，但 CDN 缓存未过期，用户仍会拿到旧的、没有 CORS 头的响应，从而报跨域错误。
以 Cloudflare 为例，官方文档指出缓存会存储频繁访问内容的副本，并默认缓存某些文件扩展名。如果你的 API 响应被缓存，且缓存时长较长，就会出现此类问题。解决方法是主动清除缓存：在 Cloudflare 控制台的“Caching”中，可以“Purge Everything”或指定 URL 清除。但要注意，清除缓存只是第一步，还需要确保后续响应正确。
常见原因二：CDN 边缘规则修改或剥离了 CORS 头
有些 CDN 会通过边缘规则（如 Cloudflare 的 Transform Rules、Workers）修改响应头。如果规则配置不当，可能剥离或覆盖了源站的 CORS 头。例如，你可能添加了一条规则来设置 Access-Control-Allow-Origin，但值写死为某个域名，导致其他域名请求失败；或者规则错误地删除了该头。
排查时，先检查 CDN 控制台是否有针对该路径的响应头修改规则。如果有，暂时禁用或修正。Cloudflare Workers 也可以处理请求，如果 Worker 代码中设置了 CORS 头，需检查其逻辑。官方文档提到 Workers 可以构建无服务器应用，但若代码错误，也会导致跨域问题。
常见原因三：CDN 节点未传递 OPTIONS 预检请求
对于非简单请求（如携带自定义头或 JSON 内容），浏览器会先发送 OPTIONS 预检请求。CDN 如果未正确转发或响应预检请求，浏览器就会认为跨域失败。有些 CDN 会拦截 OPTIONS 请求，或返回非 2xx 状态码。
验证方法：用 curl 模拟预检请求：
curl -X OPTIONS -H "Origin: https://your-site.com" -H "Access-Control-Request-Method: POST" -I https://cdn.example.com/api观察响应状态码和 Access-Control-Allow-Methods 等头。如果状态码不是 200，或缺少必要头，则问题在 CDN 层。有些 CDN 需要显式配置允许 OPTIONS 请求，或需要调整安全规则。
常见原因四：CDN 与源站之间的协议或 SNI 问题
如果 CDN 回源时使用 HTTPS，但证书配置错误，可能导致回源失败，进而返回 502/504 错误，浏览器也会表现为跨域失败。此时需要检查 CDN 的回源配置，确保源站证书有效且匹配。若源站不支持 HTTPS，可关闭回源 HTTPS 或使用 HTTP 回源。
可执行的排查与解决步骤
- 确认源站 CORS 配置正确：在源站直接返回正确的 CORS 头，包括
Access-Control-Allow-Origin（可设为*或特定域名）、Access-Control-Allow-Methods、Access-Control-Allow-Headers等。测试时可用curl验证。 - 清除 CDN 缓存：在 CDN 控制台清除特定 URL 或全部缓存，然后重新请求测试。
- 检查 CDN 边缘规则：审查是否有 Transform Rules、Workers 或其他规则修改了 CORS 头，必要时注释或修正。
- 验证预检请求：用
curl模拟 OPTIONS 请求，确保 CDN 返回正确的状态码和头。 - 检查回源配置：确认 CDN 回源协议、端口、SNI 等设置正确，避免回源失败。
- 使用 CDN 的调试工具：如 Cloudflare 的“CF-Ray”头、缓存状态（HIT/MISS）等，帮助判断响应是否来自缓存。
避免常见误区
- 误区一：只改源站不清理缓存：很多人在源站改了 CORS 配置，但忘了清缓存，导致问题依旧。
- 误区二：将
Access-Control-Allow-Origin设为*但请求携带凭证：如果请求包含credentials，*无效，必须指定具体域名。 - 误区三：忽略预检请求：只关注实际请求，忽略 OPTIONS 预检，导致问题未解决。
- 误区四：边缘规则覆盖源站头：规则优先级高于源站，若配置错误，会覆盖正确的头。
不确定性与边界条件
以上方法基于 Cloudflare 等主流 CDN 的通用行为，但不同 CDN 在缓存策略、边缘规则上存在差异。如果你的 CDN 不支持某些功能（如自定义边缘规则），或缓存策略不同，可能需要调整方案。此外，跨域问题也可能与浏览器插件、代理等客户端环境有关，建议在无痕模式下测试。
参考资料
延伸阅读