Cloudflare配置允许跨域详细教程

2024年11月26日

浏览次数: 863

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

1. 一、什么是跨域资源共享（CORS）？
2. 二、在 Cloudflare 配置允许跨域
3. 三、注意事项
4. 四、最后

一、什么是跨域资源共享（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 配置允许跨域

I. 前提条件

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

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

II. 通过 Cloudflare Rules 配置 CORS

Cloudflare 提供的 Page Rules 和 Transform Rules 可以用来定制请求和响应头信息。

步骤 1：登录 Cloudflare 控制台

访问 Cloudflare Dashboard 并登录。
选择要配置的域名。

步骤 2：设置 Transform Rules

点击 Rules > Transform Rules。
新建规则，命名为 "Add CORS Headers"。
配置以下规则：
- Condition: 设置触发条件，例如匹配特定路径 /api/*。
- Action: 选择 Modify Response Headers，并添加以下头信息：
  - Access-Control-Allow-Origin：填写 * 或特定域名（如 https://example.com）。
  - Access-Control-Allow-Methods：填写 GET, POST, OPTIONS。
  - Access-Control-Allow-Headers：填写 Content-Type, Authorization。

步骤 3：保存规则

点击 Save 保存并启用规则。

III. 使用 Workers 添加自定义 CORS

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

示例代码

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
  })
}