React调用Azure后端POST接口时出现CORS错误的求助

问题分析 #

你遇到的情况是GET接口正常但POST触发CORS错误，即使已配置*作为允许的源，核心原因通常是预请求（OPTIONS）未被正确处理，或者CORS策略未覆盖POST方法及必要的请求头。

解决方案 #

1. 检查APIM CORS策略的Allowed Methods配置 #

POST请求会先发送OPTIONS预请求，需要确保CORS策略明确包含OPTIONS和POST方法：

• 登录Azure门户，进入你的API Management实例
• 找到目标API（/api/Users所属的API）
• 切换到「CORS」标签，编辑现有策略
• 在「Allowed Methods」中添加OPTIONS和POST（不要遗漏OPTIONS，这是预请求的方法）
• 保存策略

2. 验证CORS策略的作用范围 #

确保CORS策略应用到了正确的层级：

• 全局策略：如果是全局设置，确认目标API没有覆盖该策略
• API级策略：直接在/api/Users所在的API上配置CORS，而非仅全局或其他API
• 操作级策略：检查POST /api/Users这个具体操作是否有单独的策略覆盖了全局/API级的CORS设置

3. 确认后端服务未返回冲突的CORS头 #

如果你的后端服务（比如Azure SQL对应的后端API）自身也返回Access-Control-Allow-Origin头，会和APIM的设置冲突，导致浏览器报错：

• 检查后端API的响应头，移除自定义的CORS相关头，交由APIM统一处理
• 确保后端仅处理业务逻辑，CORS完全由APIM管控

4. 验证OPTIONS预请求的响应 #

用浏览器DevTools查看OPTIONS请求的响应：

1. 打开浏览器控制台（F12），切换到「Network」标签
2. 触发POST请求，找到对应的OPTIONS请求
3. 查看「Response Headers」，确认存在以下头：
   • Access-Control-Allow-Origin: *（或http://localhost:3000）
   • Access-Control-Allow-Methods: POST, OPTIONS
   • Access-Control-Allow-Headers: Content-Type（或*，因为axios默认发送Content-Type: application/json）

如果这些头缺失，说明CORS策略未正确生效，需要重新检查APIM的配置。

你的React请求代码 #

try {
const response = await axios.post('https://stin-backend-apimanag.azure-api.net/api/Users', {
username: usernameInput.value,
password: passwordInput.value,
pay: "no"
});
setHead(payment);
setFavorites("---");
} catch (error) {
console.error('Chyba při vytváření uživatele:', error);
alert('Došlo k chybě při vytváření uživatele. Zkuste to prosím znovu.');
}

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