AWS HTTP API Gateway仅POST带请求体时出现CORS错误求助

核心问题分析 #

浏览器发送带请求体（如axios默认的application/json类型）的POST请求时，会先发起OPTIONS预检请求。你的错误说明OPTIONS请求未返回200 OK状态，大概率是HTTP API Gateway的CORS配置或Lambda处理逻辑未覆盖预检请求的响应要求。

分步解决方案 #

1. 检查HTTP API Gateway的CORS配置 #

• 确认已启用CORS，且配置包含：
  • 允许的Origin：明确添加http://localhost:3000（避免用*，带自定义头的请求不支持通配符）
  • 允许的Methods：必须包含OPTIONS、GET、POST
  • 允许的Headers：必须包含Content-Type（axios发送JSON请求会携带该头，预检请求会校验）
  • 响应头需包含Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers
• 注意：HTTP API Gateway会自动生成OPTIONS路由，但如果手动配置过OPTIONS路由，会覆盖自动生成规则，此时需确保手动路由返回正确响应。

2. 让Lambda正确处理OPTIONS请求 #

如果自动CORS配置未生效，或手动配置了OPTIONS路由，需在Lambda中专门处理预检请求：

# Python Lambda示例，其他语言逻辑一致
import json

def lambda_handler(event, context):
    # 处理OPTIONS预检请求
    if event['requestContext']['http']['method'] == 'OPTIONS':
        return {
            'statusCode': 200,
            'headers': {
                'Access-Control-Allow-Origin': 'http://localhost:3000',
                'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Max-Age': '86400'  # 缓存预检结果1天，减少重复请求
            },
            'body': ''
        }
    # 处理POST请求逻辑
    if event['requestContext']['http']['method'] == 'POST':
        # 你的业务处理代码
        return {
            'statusCode': 200,
            'headers': {
                'Access-Control-Allow-Origin': 'http://localhost:3000'
            },
            'body': json.dumps({'result': 'success'})
        }

• 关键：OPTIONS请求必须返回200状态，且响应头需覆盖预检所需的所有允许项。

3. 确认axios请求头配置 #

确保axios的请求头与CORS允许的Headers匹配（默认application/json是常用类型）：

const res_post = axios.post(`${process.env.REACT_APP_AWS_API_GATEWAY}/test`, {key: "value"}, {
  headers: {
    'Content-Type': 'application/json'
  }
}).then((res) => {
    console.log("AXIOS POST REQUEST 2 RESULT", res, res.data);
});

4. 重新部署API Gateway #

修改CORS配置或路由后，必须重新部署API Gateway，否则新配置不会生效。

常见坑点 #

• 手动配置OPTIONS路由后，未返回正确响应头和200状态，导致预检失败
• CORS配置的Access-Control-Allow-Headers未包含Content-Type，与axios发送的请求头不匹配
• Lambda处理POST请求时，未返回Access-Control-Allow-Origin头，导致实际请求完成后浏览器报错

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