使用fetch调用AWS API Gateway时OPTIONS请求报403，Axios却正常

问题现象 #

使用fetch调用AWS API Gateway的GET接口时，OPTIONS预检请求返回403错误，抓包详情如下：

HTTP/1.1 403 Forbidden
Date: Fri, 23 Sep 2022 11:50:57 GMT
Content-Type: application/json
Content-Length: 42
Connection: keep-alive
x-amzn-RequestId: 02883556-5b3b-4af7-8c3a-3d561f2e0557
x-amzn-ErrorType: MissingAuthenticationTokenException
x-amz-apigw-id: Y6WFM7rPEF9iQ=

{"message":"Missing Authentication Token"}

但相同请求细节下，使用Axios调用同一URL可正常运行。

解决方案 #

1. 配置API Gateway的OPTIONS方法权限 #

AWS API Gateway默认可能对OPTIONS方法启用了认证，但预检请求不会携带认证令牌，导致返回403。需要：

• 进入API Gateway控制台，找到对应的API和资源
• 为OPTIONS方法设置授权类型为NONE，取消认证要求
• 确保CORS配置中，Access-Control-Allow-Origin设置为你的前端域名，Access-Control-Allow-Methods包含GET, OPTIONS，Access-Control-Allow-Headers包含你请求中使用的所有头（如Authorization、Content-Type等）

2. 调整fetch的请求参数 #

fetch的默认配置和Axios不同，需要手动适配：

• 如果API需要认证，添加credentials: 'include'（跨域场景下需API Gateway允许携带凭证），或者在请求头中显式添加认证令牌：

  fetch('https://your-api-gateway-url', {
    method: 'GET',
    credentials: 'include',
    headers: {
      'Authorization': 'Bearer your-token',
      'Content-Type': 'application/json'
    }
  })
  

• 确保请求头与Axios一致，比如匹配Axios默认的Accept、User-Agent等头，避免触发额外预检逻辑

3. 排查请求头差异 #

即使Fiddler显示细节一致，仍需对比fetch和Axios的请求头：

• Axios默认会添加Content-Type: application/json，而fetch默认可能为text/plain，需手动设置fetch的Content-Type头
• 检查是否存在自定义头，确保API Gateway的CORS配置允许这些头通过预检

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