使用Axios向AWS Lambda发POST请求带data时遇CORS错误求助

核心问题 #

带data的POST请求会触发浏览器的CORS预飞（OPTIONS）请求，你的Lambda没正确处理这个OPTIONS请求，同时前端和Lambda的CORS配置都存在错误。

1. 前端代码错误修正 #

你在请求头里添加Access-Control-Allow-Origin是完全错误的——这个头是服务器返回给浏览器的响应头，不是前端发请求时需要携带的。直接删掉这个配置：

const config = {
  method: 'post',
  url: 'lambdalink',
  // 移除错误的请求头配置
  data: {
    info: JSON.stringify(data)
  }
};

Axios(config)
.then(res => console.log(JSON.stringify(res.data)))
.catch(err => console.log(err));

2. Lambda端CORS配置修正 #

你的Lambda CORS配置有三个关键问题：

• Access-Control-Allow-Origin不能设置多个值，只能是单个*或者单个具体域名（比如http://localhost:4200，不要加末尾斜杠）
• Access-Control-Allow-Headers配置错误，应该包含请求实际用到的头，比如Content-Type（因为你发送的是JSON数据，请求头会自动携带Content-Type: application/json），而非access-control-allow-origin
• 必须允许OPTIONS方法，因为预飞请求使用的是OPTIONS方法

正确的Lambda响应头配置（以Node.js为例）

不管是OPTIONS请求还是POST请求，都要返回以下头信息：

const corsHeaders = {
  'Access-Control-Allow-Origin': 'http://localhost:4200', // 也可以用'*'
  'Access-Control-Allow-Headers': 'Content-Type',
  'Access-Control-Allow-Methods': 'OPTIONS,POST'
};

Lambda必须处理OPTIONS请求

在Lambda函数开头判断请求方法，如果是OPTIONS，直接返回带CORS头的200响应，无需执行业务逻辑：

exports.handler = async (event) => {
  // 处理预飞OPTIONS请求
  if (event.httpMethod === 'OPTIONS') {
    return {
      statusCode: 200,
      headers: corsHeaders,
      body: ''
    };
  }

  // 处理POST业务逻辑
  if (event.httpMethod === 'POST') {
    // 这里写你的业务代码
    return {
      statusCode: 200,
      headers: corsHeaders,
      body: JSON.stringify({ result: 'success' })
    };
  }

  // 其他请求方法返回405不允许
  return {
    statusCode: 405,
    headers: corsHeaders,
    body: JSON.stringify({ error: 'Method not allowed' })
  };
};

为什么不带data时能正常工作？ #

不带data的POST属于简单请求，浏览器不会发送预飞OPTIONS请求，直接发送POST，只要Lambda返回了Access-Control-Allow-Origin头就能通过校验。但带data且为JSON格式时，请求的Content-Type是application/json，属于非简单请求，浏览器必须先发送OPTIONS预飞请求确认权限，此时如果Lambda没处理OPTIONS，就会返回不带CORS头的响应，导致报错。

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