React调用Cloudflare Worker函数遭遇CORS策略拦截的解决方案咨询

嘿，我刚踩过几乎一模一样的坑！Cloudflare Workers确实没有控制台里的可视化开关来配置CORS——所有跨域规则都得直接写在你的Worker代码里，这也是官方推荐的做法。

你的错误核心是：浏览器发送的预飞OPTIONS请求没得到正确的CORS响应头，而且实际请求也缺少Access-Control-Allow-Origin头。下面是具体的修复步骤：

1. 定义CORS配置头 #

先创建一个包含所有必要跨域规则的对象，你可以根据需求调整允许的源、方法和请求头：

// 本地开发用http://localhost:8000，生产环境替换成你的实际域名
const corsHeaders = {
  "Access-Control-Allow-Origin": "http://localhost:8000",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
};

如果只是临时测试，也可以把Access-Control-Allow-Origin设为*允许所有源，但生产环境强烈建议指定具体域名，避免安全风险。

2. 处理预飞OPTIONS请求 #

浏览器在发送非简单请求（比如带自定义头、POST JSON格式数据等）前，会先发送OPTIONS请求确认跨域权限，我们需要直接返回CORS许可：

async function handleRequest(request) {
  // 优先处理OPTIONS预飞请求
  if (request.method === "OPTIONS") {
    return new Response(null, { headers: corsHeaders });
  }
  
  // 下面是你原来的业务逻辑，记得给所有响应加上CORS头
  const { pathname } = new URL(request.url);
  if (pathname.startsWith("/api")) {
    return new Response(JSON.stringify({ pathname }), {
      headers: {
        ...corsHeaders, // 合并CORS头和业务响应头
        "Content-Type": "application/json",
      },
    });
  }
  if (pathname.startsWith("/status")) {
    const httpStatusCode = Number(pathname.split("/")[2]);
    if (Number.isInteger(httpStatusCode)) {
      // 对fetch返回的第三方响应，也要添加CORS头
      const catResponse = await fetch("https://http.cat/" + httpStatusCode);
      return new Response(catResponse.body, {
        headers: {
          ...corsHeaders,
          ...catResponse.headers,
        },
      });
    } else {
      return new Response("That's not a valid HTTP status code.", {
        headers: corsHeaders,
      });
    }
  }
  return new Response(JSON.stringify({ hello: "world" }), {
    headers: {
      ...corsHeaders,
      "Content-Type": "application/json",
    },
  });
}

3. 给错误响应也加上CORS头 #

别忘了在错误捕获逻辑里也添加CORS头，不然报错时浏览器还是会拦截错误信息：

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (err) => new Response(err.stack, { 
        status: 500,
        headers: corsHeaders // 这里必须加！
      })
    )
  );
});

为什么这样能解决问题？ #

• 预飞OPTIONS请求得到了明确的跨域许可，浏览器会放行后续的实际请求
• 所有响应都带上了Access-Control-Allow-Origin头，浏览器确认跨域合法后就不会再拦截返回的数据

把这些修改加到你的Worker代码里，重新部署后，本地的React应用应该就能正常调用接口了！

内容的提问来源于stack exchange，提问作者HardRock