React应用调用AWS API Gateway遇CORS错误，Postman请求正常需解决

核心原因 #

Postman不会强制执行浏览器的CORS策略，而React运行在浏览器环境中，会严格检查响应头是否包含Access-Control-Allow-Origin，你的问题就是API返回的响应里缺少这个关键头。

分步解决方案 #

1. 在API Gateway中正确配置CORS #

• 登录AWS控制台，进入API Gateway，打开你的目标API
• 选择需要配置CORS的资源（比如根资源/或者具体的子资源）
• 点击顶部的Actions，选择Enable CORS
• 在配置界面：
  • 设置Access-Control-Allow-Origin为http://localhost:3001（测试阶段可以用*，生产环境建议指定具体域名）
  • 勾选需要允许的HTTP方法（比如GET、POST等，和你的API方法匹配）
  • 设置Access-Control-Allow-Headers为Content-Type（如果你的请求带自定义头，也要加上）
  • 勾选Enable CORS and replace existing CORS headers
• 点击Enable CORS and replace existing CORS headers保存配置
• 关键操作：点击Actions -> Deploy API，选择你的部署阶段（比如prod、dev），完成部署——不重新部署的话，CORS配置不会生效

2. 确保Lambda函数返回正确的响应头 #

如果你的API使用了Lambda代理集成（Lambda Proxy Integration），Lambda必须在返回结果中显式包含CORS相关头：

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Origin": "http://localhost:3001",
            "Access-Control-Allow-Headers": "Content-Type",
            "Access-Control-Allow-Methods": "GET,POST,OPTIONS"
        },
        body: JSON.stringify({ data: "你的返回内容" }),
    };
    return response;
};

如果是非代理集成，需要在API Gateway的集成响应中添加头映射：

• 进入对应方法的Integration Response
• 展开200状态码的配置，在Headers部分添加Access-Control-Allow-Origin，映射值设为'http://localhost:3001'

3. 验证预检请求（OPTIONS） #

浏览器发送实际请求前会先发送OPTIONS预检请求，确保API Gateway能正确处理这个请求：

• 用Postman发送OPTIONS请求到你的API端点
• 检查响应头是否包含Access-Control-Allow-Origin、Access-Control-Allow-Methods等字段
• 如果OPTIONS请求返回错误，检查API Gateway是否自动创建了OPTIONS方法，并且已经部署

常见排查点 #

• 确认部署阶段：CORS配置是和部署阶段绑定的，要确保修改后部署到了正在使用的阶段
• 避免硬编码错误：比如把localhost:3000写成localhost:3001，和React的端口不匹配
• 检查Lambda错误：如果Lambda抛出异常，API Gateway可能不会返回CORS头，需要确保Lambda能正常执行并返回200状态码

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