LocalHost调用Azure APIM接口时CORS预检请求失败问题咨询

核心排查步骤 #

• 检查APIM CORS策略优先级与作用域 #

  你当前配置的全局CORS策略容易被更细粒度的策略覆盖，首先确认两点：
  1. CORS策略必须放在<inbound>入站策略节点的最开头，如果入站策略先执行IP拦截、订阅密钥校验、身份认证规则，会直接拦截OPTIONS预检请求，导致CORS失败
  2. 确认单个API、单个操作层级没有配置其他CORS策略覆盖全局规则
     你当前的CORS策略本身配置没有问题，参考如下正确的入站策略结构：

  <policies>
    <inbound>
      <!-- CORS必须放在第一个位置 -->
      <cors>
          <allowed-origins>
              <origin>*</origin>
              <!-- 调试阶段可以先显式添加你的本地前端地址，比如<origin>http://localhost:4200</origin> -->
          </allowed-origins>
          <allowed-methods preflight-result-max-age="300">
              <method>*</method>
          </allowed-methods>
          <allowed-headers>
              <header>*</header>
          </allowed-headers>
          <expose-headers>
              <header>*</header>
          </expose-headers>
      </cors>
      <!-- 其他策略放在CORS之后 -->
    </inbound>
  </policies>
  

• 豁免OPTIONS请求的订阅密钥校验 #

  这是你当前场景的最高概率问题：浏览器发起的OPTIONS预检请求不会携带ocp-apim-subscription-key自定义头，APIM会因为缺少订阅密钥直接拦截OPTIONS请求，返回401错误导致预检失败。
  解决方案是在入站策略中添加OPTIONS请求的订阅密钥豁免规则，放在CORS策略之后即可：

  <choose>
    <when condition="@(context.Request.Method == "OPTIONS")">
      <set-header name="Ocp-Apim-Subscription-Key" exists-action="override">
        <value>替换为你当前APIM产品的有效订阅密钥</value>
      </set-header>
    </when>
  </choose>
  

• 关闭后端.NET Core的CORS配置 #

  不要同时在APIM和后端API两层配置CORS，会导致返回的CORS头重复，浏览器校验不通过。APIM已经处理CORS逻辑的情况下，直接注释掉后端.NET Core代码里的app.UseCors()相关配置即可，同时不需要把OPTIONS请求转发到后端，APIM会直接响应预检请求。

• 手动验证预检请求响应 #

  直接用curl或者Postman发起OPTIONS请求到你的APIM接口地址，添加如下头模拟浏览器预检：

  Access-Control-Request-Method: GET
  Access-Control-Request-Headers: ocp-apim-subscription-key
  Origin: http://localhost:你前端的端口号
  

  正常情况下请求应该返回200状态码，且响应头包含Access-Control-Allow-Origin、Access-Control-Allow-Headers等CORS相关字段，如果返回401/403/404优先解决对应状态码的问题。

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