排查AWS Amplify应用中的CORS跨域问题

先排查API Gateway的CORS配置 #

• 登录AWS控制台，找到你的API Gateway实例，进入对应阶段（dev）的/product资源，打开CORS配置：
  • 确保Allowed Origins包含http://localhost:5173（测试阶段可临时用*，生产环境需指定具体域名）
  • Allowed Headers要包含Authorization、Content-Type这类你请求里用到的头
  • Allowed Methods勾选GET
  • 关键：修改配置后必须点击「部署API」，选择对应的阶段（dev）生效，很多人漏了这步导致配置不生效

检查Lambda函数的响应头 #

如果API Gateway用的是Lambda代理集成，Lambda返回的响应必须携带CORS头，否则即使API Gateway配置了CORS也会失效。比如Node.js Lambda要这么写：

exports.handler = async (event) => {
  // 处理业务逻辑...
  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "http://localhost:5173", // 或*
      "Access-Control-Allow-Headers": "Authorization, Content-Type"
    },
    body: JSON.stringify(你的返回数据)
  };
};

如果是非代理集成，需要在API Gateway的「集成响应」里手动添加Access-Control-Allow-Origin头映射。

修正前端API调用代码 #

你的代码里contentType的位置不对，应该放在headers对象里，Amplify的get方法选项格式要调整：

const restOperation = get({ 
  apiName: this.apiName,
  path: this.path,
  options: {
    headers: {
      Authorization: "test",
      "Content-Type": "application/json" // 移到headers里
    },
    queryParams: {
      user: this.username
    }
  }
});

调试方法 #

• 打开浏览器开发者工具的「Network」面板，找到失败的GET请求，查看Response Headers：如果没有Access-Control-Allow-Origin，说明后端配置没生效
• 先去掉Authorization头测试请求，排除授权头导致的CORS校验失败
• 用Postman直接调用API，看返回头是否包含CORS相关字段，确认后端本身的响应是否正确

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