Netlify部署应用后出现CORS错误，请求正确配置方案

一、Netlify Function响应头的正确配置 #

手动添加响应头时容易遗漏关键字段，确保函数返回完整的CORS头部，尤其是认证相关的配置：

exports.handler = async (event, context) => {
  // 处理OPTIONS预请求，必须优先返回
  if (event.httpMethod === "OPTIONS") {
    return {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin": "https://your-site.netlify.app", // 替换为你的生产域名，不要用*
        "Access-Control-Allow-Headers": "Content-Type, Authorization", // 明确允许认证头
        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
        "Access-Control-Allow-Credentials": "true" // 带认证凭证时必须设为true
      },
      body: ""
    };
  }

  // 处理FaunaDB业务逻辑...
  const responseData = await yourFaunaAuthLogic();

  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "https://your-site.netlify.app",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Credentials": "true"
    },
    body: JSON.stringify(responseData)
  };
};

• 生产环境禁止用*作为Access-Control-Allow-Origin，必须指定你的实际域名，避免安全风险。
• 必须单独处理OPTIONS预请求，前端发起认证请求前会先发送OPTIONS，这一步不能执行业务逻辑，直接返回CORS头即可。

二、netlify.toml全局CORS补充配置 #

如果函数级配置未生效，在项目根目录的netlify.toml中添加全局规则：

[[headers]]
  for = "/api/*" # 匹配所有API路径
  [headers.values]
    Access-Control-Allow-Origin = "https://your-site.netlify.app"
    Access-Control-Allow-Headers = "Content-Type, Authorization"
    Access-Control-Allow-Methods = "GET, POST, OPTIONS"
    Access-Control-Allow-Credentials = "true"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat" # 确保API路径正确映射到Netlify Functions
  status = 200

• 确认生产环境API端点为https://your-site.netlify.app/api/xxx，与重写规则路径一致。

三、常见排查要点 #

• 前端请求是否正确携带Authorization头：比如JWT需格式化为Authorization: Bearer <token>，且函数已允许该Header。
• FaunaDB密钥是否在Netlify环境变量中配置：生产环境禁止硬编码密钥，在Netlify后台「Site settings > Environment variables」中添加。
• 清除浏览器缓存：旧的CORS缓存可能导致测试异常，用无痕模式验证。

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