React调用AWS Lambda部署的GraphQL接口遇认证及跨域问题

你碰到的是API Gateway里常见的关联问题：CORS预请求失败导致后续请求被拦截，进而抛出"Missing Authentication Token"错误。我来一步步帮你搞定：

第一步：修复API Gateway的CORS配置 #

浏览器发起跨域请求前会先发送OPTIONS预请求，如果API Gateway没正确处理这个请求，就会触发CORS警告，同时实际请求也会被拦截，最终返回"Missing Authentication Token"（因为预请求失败后浏览器没发送完整的请求内容）。

• 登录AWS控制台打开API Gateway服务，找到你的目标API
• 选中绑定Lambda的资源（比如/graphql，如果是根资源就选/），点击顶部Actions按钮，选择Enable CORS
• 在配置弹窗里：
  • Access-Control-Allow-Origin填你的React应用域名：开发环境用http://localhost:3000（对应你的React端口），生产环境填实际域名；测试阶段可以临时用*，但上线记得改成具体域名
  • Access-Control-Allow-Headers里添加Content-Type、Authorization（如果你的请求带认证头）等需要的请求头
  • 确保Access-Control-Allow-Methods包含OPTIONS、POST、GET（对应你实际用的请求方法）
• 点击Enable CORS and replace existing CORS headers，然后一定要点Actions -> Deploy API，选择test阶段部署——这一步绝对不能忘，不部署的话配置不会生效！

第二步：排查"Missing Authentication Token"错误 #

这个错误大多和API Gateway的资源/方法配置、请求URL正确性有关：

• 检查请求URL是否完整：如果Lambda绑定在/graphql资源下，正确的端点应该是https://z8zch5bp3m.execute-api.us-east-1.amazonaws.com/test/graphql，而不是只到/test。GraphiQL能访问说明它用了正确路径，你要确保React代码里的URL和GraphiQL一致
• 确认API Gateway方法的认证设置：进入API Gateway的方法请求配置（比如POST方法），检查Authorization设为None，API Key Required设为false——如果启用了API密钥或IAM认证，React请求需要携带对应凭证，而GraphiQL可能已经配置了这些所以能访问
• 验证OPTIONS方法是否存在：CORS配置会自动生成OPTIONS方法，如果没生成，手动创建：
  1. 选中目标资源，点击Actions -> Create Method，选OPTIONS
  2. 集成类型选MOCK，点击保存
  3. 在集成响应里，设置状态码200，添加响应头：Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods，值和之前CORS配置一致

第三步：调整React请求代码 #

确保你的React请求携带正确的头和参数，比如用fetch的示例：

const fetchGraphQL = async () => {
  try {
    const response = await fetch('https://z8zch5bp3m.execute-api.us-east-1.amazonaws.com/test/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 如果API要求API密钥，取消注释并填入你的密钥
        // 'x-api-key': 'YOUR_API_GATEWAY_KEY'
      },
      body: JSON.stringify({
        query: `{ yourGraphQLQueryHere }`
      })
    });
    const data = await response.json();
    console.log('GraphQL Response:', data);
  } catch (error) {
    console.error('Request Error:', error);
  }
};

额外测试建议 #

先用Postman直接调用API端点，如果Postman能正常返回数据，说明API Gateway和Lambda配置没问题，问题出在React的CORS或请求头；如果Postman也返回"Missing Authentication Token"，优先排查API Gateway的资源路径、方法配置和部署状态。

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