Netlify Functions CORS问题求助：netlify.toml配置无效

1. 在函数代码中直接配置CORS响应头 #

这是最直接有效的方式，不受配置文件缓存或格式问题影响，直接在函数内硬编码响应头：

exports.handler = async (event) => {
  // 处理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, PUT, DELETE',
      },
      body: '',
    };
  }

  // 处理实际业务请求
  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': 'https://your-site.netlify.app', // 和预检请求保持一致
    },
    body: JSON.stringify({ data: '请求成功' }),
  };
};

2. 检查netlify.toml配置的正确性 #

如果坚持用配置文件解决，确保格式和路径完全正确：

[[headers]]
  for = "/.netlify/functions/*"
  [headers.values]
    Access-Control-Allow-Origin = "https://your-site.netlify.app"
    Access-Control-Allow-Headers = "Content-Type"
    Access-Control-Allow-Methods = "GET, POST, OPTIONS"

• 确认配置文件放在项目根目录
• 部署后查看Netlify后台Deploys日志，确认配置被正常加载
• 清理浏览器缓存后重新测试，避免旧配置缓存影响

3. 排查函数部署状态 #

• 登录Netlify后台进入Functions页面，确认目标函数已成功部署，无执行报错
• 如果函数本身抛出异常，会导致CORS头无法正常返回，先确保函数能独立正常运行

4. 处理复杂请求的预检逻辑 #

如果你的请求携带自定义头、使用PUT/DELETE等方法，必须单独处理OPTIONS预检请求——这是大部分CORS问题的核心漏项，也就是上面代码中专门的OPTIONS分支处理。

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