启用OAuth2.0后Axios调用Apigee API触发OPTIONS请求致CORS错误求助

核心问题根源 #

浏览器发送的OPTIONS预检请求会被Apigee的OAuth策略拦截校验，但OPTIONS请求本身不需要授权；若未专门处理这类请求，会触发授权失败或空路由错误，导致后续POST请求无法正常执行。

具体解决步骤 #

1. 新增专属OPTIONS请求处理Flow

在API代理的ProxyEndpoint配置中添加一个优先级最高的Flow，专门匹配OPTIONS请求，直接返回CORS响应，不进入OAuth验证和目标端点流程：

<Flow name="Handle-OPTIONS">
  <Request>
    <Step>
      <Name>CORS-Policy</Name>
    </Step>
  </Request>
  <Response>
    <Step>
      <Name>CORS-Policy</Name>
    </Step>
  </Response>
  <Condition>request.verb == "OPTIONS"</Condition>
</Flow>

将这个Flow放在PreFlow之前，确保OPTIONS请求被优先匹配处理。

2. 调整CORS策略配置

确保CORS策略包含以下关键配置，匹配你的前端应用需求：

<CORS async="false" continueOnError="false" enabled="true" name="CORS-Policy">
  <DisplayName>CORS-Policy</DisplayName>
  <AllowedOrigins>
    <Origin>https://your-react-app-domain.com</Origin> <!-- 替换为实际前端域名，测试可临时用* -->
  </AllowedOrigins>
  <AllowedMethods>
    <Method>OPTIONS</Method>
    <Method>POST</Method>
  </AllowedMethods>
  <AllowedHeaders>
    <Header>Content-Type</Header>
    <Header>Authorization</Header> <!-- 包含请求中带的自定义头 -->
  </AllowedHeaders>
  <ExposeHeaders/>
  <MaxAge>3600</MaxAge>
</CORS>

3. 限制OAuth策略的执行范围

修改OAuth验证策略的执行条件，排除OPTIONS请求，避免不必要的授权校验：

<Step>
  <Name>OAuth2-Verify-Access-Token</Name>
  <Condition>request.verb != "OPTIONS"</Condition>
</Step>

4. 清理目标端点的冗余配置

移除目标端点上的CORS策略，统一在代理层处理OPTIONS请求，避免策略冲突导致的异常。

验证逻辑 #

完成配置后，OPTIONS预检请求会被Apigee直接拦截处理，返回符合浏览器要求的CORS响应；后续POST请求会正常触发OAuth验证并转发到目标服务，解决之前的CORS错误问题。

内容的提问来源于stack exchange，提问作者gobel-user735