通过Code Pipeline部署React应用至S3后调用API Gateway出现异常

核心问题：package.json的proxy仅适用于本地开发 #

package.json里的proxy配置是Create React App开发服务器的专属特性，生产环境（比如S3静态托管）完全不生效。本地开发时dev server会帮你转发请求，但S3只是静态文件托管服务，没有代理能力——生产环境下如果你的API请求用了相对路径，会直接指向S3的域名，而非目标API Gateway。

具体排查和修复步骤 #

• 替换API请求的相对路径为完整URL：
  把代码里所有调用API的相对路径（比如/api/get-data）改成API Gateway的完整地址（比如https://linkgoeshere.amazonaws.com/dev/api/get-data）。也可以通过环境变量配置API地址，让代码根据环境自动切换（比如用process.env.REACT_APP_API_URL）。

• 检查并配置API Gateway的CORS：
  不要只配置S3的CORS，API Gateway本身必须开启CORS：

  1. 进入API Gateway控制台，找到目标API。
  2. 选中对应的资源，点击Actions -> Enable CORS。
  3. 确保配置允许S3托管应用的域名（测试阶段可以用*，生产环境建议指定具体域名），并包含Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers这些必要响应头。
  4. 重新部署API（配置修改后必须重新部署才会生效，这步很容易漏）。

• 验证S3的CORS规则是否正确：
  确保S3的CORS规则允许必要的请求方法和来源，示例规则如下：

  [
    {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
      "AllowedOrigins": ["https://你的S3托管域名.com"],
      "ExposeHeaders": []
    }
  ]
  

• 查看浏览器控制台的具体错误信息：
  打开浏览器开发者工具的Console和Network标签，确认错误类型：如果是CORS相关提示，重点排查API Gateway的配置；如果是404/500状态码，检查请求URL是否正确、API Gateway的部署状态是否正常。

内容的提问来源于stack exchange，提问作者hieule.misumi