启用CORS后仍遇跨域问题：React+Azure Functions集成求助

问题背景 #

开发React Web应用，通过Azure Functions的HTTP触发器调用API，单个API单独测试正常，但集成阶段出现CORS错误，即使配置了Azure Functions的CORS规则后仍报错，未使用Express.js。

相关代码 #

Azure Functions Program.cs 配置 #

// 示例配置代码
var host = new HostBuilder()
    .ConfigureFunctionsWorkerDefaults()
    .Build();

host.Run();

React 请求代码（原出错版本） #

fetch('https://your-function-app.azurewebsites.net/api/your-trigger', {
  method: 'POST',
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.catch(error => console.error('CORS 错误:', error));

排查结论与修复方案 #

经排查，问题根源是React请求缺少必要的请求头，导致Azure Functions的CORS验证逻辑不通过。

修复后的React请求代码 #

添加Content-Type请求头（POST请求必备），如果使用自定义头，需确保在Azure CORS配置中添加对应允许项：

fetch('https://your-function-app.azurewebsites.net/api/your-trigger', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 新增必要请求头
    // 若有自定义头，如 'X-App-Key'，需在Azure CORS的「允许的头」中添加该名称
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.catch(error => console.error('请求错误:', error));

配套Azure CORS配置检查 #

1. 确保在Azure门户的Functions应用「CORS」设置中，已添加React应用的完整域名（如http://localhost:3000、https://your-react-app.com）
2. 若请求中使用了自定义请求头，需在「允许的头」列表中添加对应的头名称
3. 确认「允许的方法」包含请求使用的HTTP方法（如POST、GET）

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