跨域资源共享（CORS, Cross-Origin Resource Sharing）是现代浏览器使用的一种机制，用于控制跨域请求的访问权限。通过配置 CORS，可以让不同域名的资源安全地交互。在使用 Cloudflare 作为反向代理或 CDN 服务时，我们也可以通过其自定义规则功能来实现允许跨域的配置。

一、什么是跨域资源共享（CORS）

CORS 是一种 W3C 标准，用于让服务器定义哪些域名可以访问资源。浏览器会根据CORS响应头信息决定是否允许跨域访问。常见的 CORS 响应头包括:

• Access-Control-Allow-Origin：指定允许访问的域名。
• Access-Control-Allow-Methods：指定允许的 HTTP 方法（如 GET, POST）
• Access-Control-Allow-Headers：指定允许的自定义头信息
• Access-Control-Max-Age：指定预检请求的有效期

二、在 Cloudflare 配置允许跨域

1. 在开始之前，请确保满足以下条件：

• 你已注册并接管了你的域名到 Cloudflare
• 你的站点已启用代理模式（Cloudflare 的橙色云状态）

2. 通过 Cloudflare Rules 配置 CORS

• 选择要配置的域名，点击 Rules > Transform Rules（设置响应头） > 新建规则

• 新建规则，命名为 "Add CORS Headers"

• 配置以下规则

代码如下

Access-Control-Allow-Origin = *
Access-Control-Allow-Methods = GET, POST, OPTIONS
Access-Control-Allow-Headers = Content-Type, Authorization
Access-Control-Allow-Credentials = true 
Access-Control-Max-Age = 600
Vary = Origin

3. 使用 Workers 添加自定义 CORS

如果需要更复杂的逻辑，可以使用Cloudflare Workers手动控制CORS头信息。

步骤：选择Workers > 创建新Worker，粘贴下述代码 > 绑定路由规则 > 保存并启用

addEventListener("fetch", event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const response = await fetch(request)
    const newHeaders = new Headers(response.headers)

    // 添加 CORS 头
    newHeaders.set("Access-Control-Allow-Origin", "*")
    newHeaders.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
    newHeaders.set("Access-Control-Allow-Headers", "Content-Type, Authorization")

    return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders
    })
}

三、注意事项

1. 安全性：使用 Access-Control-Allow-Origin: 会允许所有域访问你的资源，可能引发安全问题。建议仅允许可信域名访问。
2. 缓存问题：Cloudflare 的缓存机制可能导致 CORS 配置延迟生效，建议清除缓存后测试.
3. 预检请求（OPTIONS）：确保服务器正确处理浏览器发送的预检请求，否则跨域请求可能失败。

四、最后

通过Cloudflare的 Rules 或 Worker 功能，可以灵活地配置允许跨域的设置，满足不同场景的需求。无论是简单的静态资源跨域，还是复杂的 API 请求跨域，Cloudflare都提供了强大的工具支持。在实际操作中，应根据具体需求调整配置，以确保安全性和性能的平衡。