如何从React前端直接调用AWS API Gateway？跨域与鉴权报错如何解决？

已完成的前置配置确认 #

• Lambda函数已在AWS Console创建，关联的API Gateway路由配置完成，所有函数在Lambda控制台测试页可正常运行
• React为标准架构，后续将部署到AWS Amplify
• 历史项目对接本地后端时，可通过Axios正常完成请求交互

核心故障现象 #

使用Axios从前端请求已部署的API Gateway访问链接时，持续出现两类报错，多次调整配置后仍回到初始故障状态：

• 接口返回No Authentication Token（无鉴权令牌）错误
• 浏览器报跨域错误：响应缺失Access-control-allow-origin相关头

对应问题的排查和修复步骤 #

1. 修复No Authentication Token鉴权报错 #

这个报错的来源通常分两层，按优先级排查：

• API Gateway侧鉴权配置不匹配
  进入API Gateway对应路由的「方法请求」配置页，检查「授权」项设置：
  • 如果是无需登录即可访问的公开接口，将授权方式调整为NONE
  • 调整完成后必须点击「部署API」，将变更同步到你前端正在调用的API阶段——这是最容易被忽略的步骤：在控制台保存的配置只是草稿，不部署就不会对线上请求生效
  • 如果业务确实需要鉴权（比如对接Cognito用户池、自定义Lambda授权器、IAM鉴权），需要在Axios的请求头中按规范携带对应凭证，例如Cognito场景需要在请求头加上Authorization: <用户ID令牌>
• Lambda函数内部的逻辑校验触发报错
  部分开发者会在Lambda业务代码中手动校验请求头的鉴权字段，缺失时直接抛出No Authentication Token的返回。可以在Lambda测试页模拟不带鉴权头的请求，如果能复现报错，就需要调整Lambda内部的鉴权判断逻辑，和API Gateway侧的鉴权配置保持一致。

2. 修复跨域缺少响应头的报错 #

有两种经过验证的可靠实现方式，不要靠零散修改响应头碰运气：

• 方式1：在API Gateway控制台统一配置CORS
  在对应API资源上启用内置CORS配置，设置允许的源地址：开发阶段可临时设置为*，生产环境建议配置Amplify的实际部署域名；同时按需配置允许的请求方法、请求头。配置完成后同样需要重新部署API到对应阶段才能生效。
• 方式2：在Lambda返回中直接携带跨域头
  如果使用的是HTTP API v2版本的API Gateway，可在Lambda的返回结构体中直接加入跨域响应头，同时单独处理浏览器的OPTIONS预检请求。示例返回结构：

  // 处理OPTIONS预检请求
  if (event.requestContext?.http?.method === 'OPTIONS') {
    return {
      statusCode: 200,
      headers: {
        "Access-control-allow-origin": "*",
        "Access-control-allow-headers": "Content-Type,Authorization",
        "Access-control-allow-methods": "OPTIONS,GET,POST"
      },
      body: ''
    }
  }
  // 正常业务请求返回
  return {
    statusCode: 200,
    headers: {
      "Access-control-allow-origin": "*",
      "Access-control-allow-headers": "Content-Type,Authorization"
    },
    body: JSON.stringify({ /* 业务返回数据 */ })
  }
  

3. 容易遗漏的排查点 #

• 如果API Gateway开启了API密钥校验，需要在Axios请求头中加上对应x-api-key字段，否则也会触发鉴权类报错
• 不要把本地调试的localhost硬编码到跨域白名单里，Amplify拿到正式域名后再更新对应的允许源即可
• 如果API Gateway关联了WAF防护规则，检查是否有规则阻断了来自Amplify域名的跨域请求

内容的提问来源于stack exchange，提问作者Kristo Cule