API Gateway启用CORS仍遇204错误：浏览器PUT请求遭CORS拦截

核心问题分析 #

你的HTTP API Gateway + Lambda + DynamoDB架构中，Postman可正常请求但浏览器PUT/POST触发CORS错误、GET正常，核心原因是预检OPTIONS请求未被正确处理，以及API Gateway与Lambda响应的协同配置存在问题：

1. GET属于简单请求，无需预检，API Gateway的CORS头直接生效，因此正常；
2. PUT/POST属于非简单请求，浏览器会先发送OPTIONS预检请求，该请求的处理逻辑缺失导致CORS拦截；
3. 你的Lambda代码未处理OPTIONS /items路由，会触发默认分支的错误抛出，返回400状态码，覆盖了API Gateway的CORS配置响应。

分步解决方案 #

1. 修复Lambda的OPTIONS请求处理

在Lambda的路由分支中添加OPTIONS的专门处理逻辑，返回符合预检要求的响应（204状态码、无响应体）：

const dynamo = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event, context) => {
  let body;
  let statusCode = 200;
  const headers = {
    "Content-Type": "application/json",
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'OPTIONS,PUT,GET,POST',
    'Access-Control-Allow-Headers': 'Content-Type' // 按需添加其他自定义请求头
  };

  try {
    switch (event.routeKey) {
      case "OPTIONS /items":
        statusCode = 204;
        body = ''; // 预检请求不需要响应体
        break;
      case "GET /items":
        // 你的数据库查询逻辑
        body = await dynamo.scan({ TableName: '你的表名' }).promise();
        break;
      case "PUT /items":
        // 你的数据库写入逻辑
        const item = JSON.parse(event.body);
        await dynamo.put({ TableName: '你的表名', Item: item }).promise();
        body = { message: 'Item created' };
        break;
      case "POST /items":
        // 补充POST请求的处理逻辑（如果需要）
        break;
      default:
        throw new Error(`Unsupported route: "${event.routeKey}"`);
    }
  } catch (err) {
    statusCode = 400;
    body = err.message;
  } finally {
    // 注意：204状态码不能返回JSON字符串，否则会触发响应格式错误
    body = statusCode === 204 ? '' : JSON.stringify(body);
  }

  return {
    statusCode,
    body,
    headers
  };
};

2. 验证HTTP API Gateway的CORS配置

进入API Gateway控制台，找到目标HTTP API：

• 进入CORS配置页面，确保：
  • Allowed origins设置为http://localhost:5500（生产环境建议指定具体域名，开发阶段可用*）
  • Allowed methods包含OPTIONS, GET, PUT, POST
  • Allowed headers包含Content-Type（若请求带其他自定义头，需一并添加）
  • 按需勾选Allow credentials（仅当需要携带Cookie或认证信息时开启）
• 配置完成后，重新部署到目标Stage，确保配置生效。

3. 排查响应头不显示问题

Postman中看不到响应头的可能原因：

• 若使用Lambda代理集成，API Gateway会转发Lambda的响应头，但如果Lambda返回400错误（如之前的OPTIONS路由缺失），响应头会被错误状态覆盖；
• 切换到Postman的Headers标签页，查看Response Headers区域，确认Access-Control-Allow-Origin是否存在；
• 若仍无显示，可在API Gateway的集成响应中强制添加该头，但优先保证Lambda的响应头配置正确。

4. 额外验证点

• 确认HTTP API Stage使用的是最新部署版本，避免配置未同步；
• 用浏览器开发者工具（Network标签）查看OPTIONS请求的响应，确认状态码为204且存在Access-Control-Allow-Origin头；
• POST请求需确保携带Content-Type: application/json头，否则预检请求会失败。

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