Supabase Edge Functions跨域(CORS)问题排查求助

核心问题诊断 #

你的Edge Function代码存在关键逻辑错误：在判断请求方法（OPTIONS/POST）之前，提前执行了await req.json()。

浏览器发送的OPTIONS预检请求没有请求体，执行req.json()会直接抛出错误，导致代码无法进入OPTIONS分支返回CORS响应头，最终触发浏览器的CORS报错。而Postman/Insomnia不会强制触发预检请求，因此能正常调用函数。

修复方案 #

将await req.json()移到POST请求的分支内部，确保只有POST请求才会读取请求体：

export const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers":
    "authorization, x-client-info, apikey, content-type",
  "Access-Control-Allow-Methods": "POST, OPTIONS",
};

Deno.serve(async (req) => {
  // 优先处理OPTIONS预检请求，不提前读取请求体
  if (req.method === "OPTIONS") {
    return new Response(null, {
      status: 204,
      headers: corsHeaders, // 204响应无需Content-Type
    });
  }

  if (req.method === "POST") {
    // 仅在POST分支读取请求体
    const { number, topic, baseLanguage, targetLanguage } = await req.json();
    
    let jsonIsValid = false;
    let reply = "";
    let triesCounter = 0;
    do {
      reply = await getVocabularies(
        number,
        topic,
        baseLanguage,
        targetLanguage,
      );
      jsonIsValid = validateJson(reply);
    } while (!jsonIsValid && triesCounter++ < 0);

    let responseText = "ChatGPT responded in no valid JSON format";
    if (jsonIsValid) {
      responseText = JSON.stringify(JSON.parse(reply));
    }

    return new Response(responseText, {
      status: jsonIsValid ? 200 : 500,
      headers: { ...corsHeaders, "Content-Type": "application/json" },
    });
  }

  // 处理未支持的请求方法
  return new Response("Method Not Allowed", { status: 405, headers: corsHeaders });
});

额外检查项 #

• 确认函数URL正确性：你提供的URL末尾带有多余单引号，检查实际部署的URL是否存在该问题，避免请求地址无效。
• React Native调试模式：若使用调试器，代理转发可能干扰CORS头传递，可尝试关闭调试模式直接测试。
• 重新部署函数：确保修改后的代码已更新到Supabase服务器。

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