当您的网站资源通过 CDN 分发后，前端应用向不同域名发起请求时，常常会遇到跨域资源共享（CORS）问题。本官方公告将指导您如何配置 CDN 的跨域资源共享，确保跨域请求安全、高效地完成。我们将从实际问题切入，逐步解释配置过程、常见误区及与缓存、DDoS 防护的协同。
为什么 CDN 需要处理跨域资源共享？
CDN 的核心职责是缓存并加速内容交付，但跨域资源共享（CORS）是浏览器的一种安全机制，用于控制跨域请求。当您的 API 或静态资源通过 CDN 提供服务时，若前端应用部署在另一个域名，浏览器会发起预检请求（OPTIONS）以确认服务器是否允许跨域。若 CDN 未正确响应 CORS 头，请求将被浏览器拦截，导致资源加载失败。因此，CDN 的 CORS 配置直接关系到跨域应用的可用性。
判断您的 CDN 是否需要配置 CORS
并非所有 CDN 请求都需要 CORS 配置。您需要评估以下场景：
- 同源请求：前端应用与 API 同域名，无需 CORS。
- 跨域请求：前端应用与 API 不同域名，必须配置 CORS。
- 静态资源：如字体文件、图片等，某些浏览器要求 CORS 头才能跨域使用。
如果您的业务涉及跨域，请继续阅读。
CDN 跨域资源共享配置步骤
以 Cloudflare 为例，其 CDN 服务允许您通过自定义规则或 Workers 来实现 CORS 配置。以下是两种常见方法：
方法一：使用缓存规则（Cache Rules）
Cloudflare 的“缓存规则”功能（官方文档）允许您定义哪些资源应被缓存以及缓存时长，但这并不直接控制 CORS 头。要添加 CORS 头，您通常需要借助“转换规则”或“Workers”。
方法二：使用 Cloudflare Workers
Cloudflare Workers 是一个无服务器平台，允许您在边缘运行 JavaScript 代码，动态修改请求和响应。您可以在 Worker 脚本中检查请求的 Origin 头，并添加相应的 Access-Control-Allow-Origin 等响应头。例如：
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const response = await fetch(request)
const newResponse = new Response(response.body, response)
newResponse.headers.set('Access-Control-Allow-Origin', '*')
return newResponse
}
此示例允许所有来源跨域访问，但在生产环境中，您应根据实际需求限制来源。
配置 CORS 时的常见错误与误区
- 忽略预检请求：对于携带凭证或非简单请求，浏览器会先发送 OPTIONS 请求。CDN 必须正确响应 OPTIONS，否则请求失败。
- 使用通配符搭配凭证：Access-Control-Allow-Origin: * 与 Access-Control-Allow-Credentials: true 不能同时使用，否则浏览器会拒绝。
- 缓存 CORS 响应：如果 CDN 缓存了 CORS 响应，可能导致不同来源的请求得到错误的 CORS 头。建议对 OPTIONS 响应禁用缓存，或根据 Origin 动态生成头。
与缓存、DDoS 防护的协同
CDN 的 CORS 配置并非孤立，它需要与缓存规则和 DDoS 防护协同工作。例如，Cloudflare 的缓存默认会缓存静态资源（扩展名如 .css、.js），但动态 API 通常不被缓存。您需要确保 CORS 头不被缓存错误地复用。同时，DDoS 防护（官方文档）会自动拦截恶意流量，但不会影响正常的跨域预检请求。在配置 CORS 时，请确保您的安全规则不会误伤合法的 OPTIONS 请求。
配置后的验证与测试
配置完成后，您应使用浏览器的开发者工具或 curl 命令验证响应头。例如：
curl -H "Origin: https://example.com" -I https://your-cdn-endpoint.com/api
检查响应中是否包含正确的 Access-Control-Allow-Origin 头。同时，测试带凭证的跨域请求，确保预检通过。
官方建议与后续支持
本指南基于 Cloudflare 官方文档编写，但并非所有 CDN 都提供相同的配置方式。若您使用其他 CDN 服务，请参考其官方文档。我们建议您在生产环境上线前，充分测试 CORS 配置，并定期审查安全策略。若您遇到问题，可参考我们的其他公告：CDN 缓存规则调整指南 和 CDN 节点扩容通知。
参考资料
延伸阅读