调用Azure API Management封装的第三方API时遭遇CORS拦截问题

1. 修正Origin格式 #

你的APIM CORS配置里的origin带了结尾斜杠（比如http://localhost:3000/），但浏览器发送的Origin请求头是不带斜杠的（比如http://localhost:3000），这会导致origin匹配失败，APIM不会返回CORS头。

修改<allowed-origins>里的origin，去掉结尾斜杠：

<allowed-origins>
    <origin>[FE ORIGIN]</origin>
    <origin>http://localhost:3000</origin>
    <origin>http://localhost:3001</origin>
</allowed-origins>

2. 移除Outbound里手动设置的CORS头 #

APIM的<cors>策略已经自动处理了Access-Control-Allow-Origin和Access-Control-Allow-Credentials响应头，你在Outbound里手动设置会和CORS策略的输出冲突，甚至覆盖正确的头。

删除Outbound里的这两个<set-header>节点：

<!-- 移除以下内容 -->
<set-header name="Access-Control-Allow-Origin" exists-action="override">
    <value>@(context.Request.Headers.GetValueOrDefault("Origin",""))</value>
</set-header>
<set-header name="Access-Control-Allow-Credentials" exists-action="override">
    <value>false</value>
</set-header>

3. 验证策略是否应用到所有操作 #

确保你的CORS策略是应用在API级别（而非单个操作），或者确认所有需要被前端调用的操作都继承了该策略。可以在APIM的API编辑页面，检查"Inbound processing"里的策略是否正确加载。

4. 检查是否存在订阅密钥或权限问题 #

如果前端调用APIM时没有提供有效的订阅密钥，APIM会返回401/403错误，这类错误响应默认不会包含CORS头，浏览器就会触发CORS报错（实际是权限问题，但浏览器只提示CORS头缺失）。

可以直接在浏览器地址栏访问APIM URL，看是否返回正常数据；或者在Axios里添加错误日志，打印具体的响应状态码：

.catch((error) => {
  console.error('请求错误:', error.response?.status, error.response?.data);
  return null;
});

5. 验证Preflight请求处理 #

浏览器在发送GET/POST等请求前，会先发送OPTIONS预请求，确认CORS权限。检查APIM是否正确处理OPTIONS请求：

• 确保<allowed-methods>里包含OPTIONS（你已经配置了）
• 可以用Postman发送OPTIONS请求到APIM URL，查看响应头是否包含Access-Control-Allow-Origin、Access-Control-Allow-Methods等头。

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