AWS Lambda HTTP API POST请求仅返回头部 如何获取提交的表单数据

问题原因 #

你遇到的问题由两个核心原因导致：

• 你使用的是API Gateway HTTP API v2版本的事件格式，请求体不会直接平铺在event根对象中，而是存放在event.body字段内
• 你打印的event中content-length为0，要么是请求本身未成功携带payload，要么是你打印的是CORS预检的OPTIONS请求（该类请求本身不会携带body）

第一步：修复前端请求逻辑 #

你的XMLHttpRequest缺少状态回调，不利于排查问题，替换为以下代码：

function submitToAPI(e) {
  e.preventDefault();
  const URL = "https://fvxw67h6bl.execute-api.us-east-1.amazonaws.com/default/GetData";
  
  const nameInput = document.getElementById("name");
  const emailInput = document.getElementById("email");
  if (!nameInput || !emailInput) {
    alert("表单元素不存在，请检查页面代码");
    return false;
  }
  const name = nameInput.value.trim();
  const email = emailInput.value.trim();

  if (name === "" || email === "") {
    alert("请填写所有必填字段");
    return false;
  }
  
  const emailRE = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (!emailRE.test(email)) {
    alert("输入的邮箱地址无效");
    return false;
  }
  const data = { name, email };
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.open("POST", URL, true);
  xmlhttp.setRequestHeader("Content-Type", "application/json");
  // 添加请求回调方便排查问题
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4) {
      console.log("请求响应状态：", xmlhttp.status, xmlhttp.responseText);
    }
  };
  xmlhttp.send(JSON.stringify(data));
  return true;
}

第二步：修改Lambda侧解析逻辑 #

API Gateway v2版本的事件会把请求体放在body字段，如果开启了Base64编码需要先解码，以Node.js运行时为例：

exports.handler = async (event) => {
  // 优先处理CORS预检请求
  if (event.requestContext.http.method === 'OPTIONS') {
    return {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Allow-Methods": "POST, OPTIONS"
      }
    }
  }

  // 解析请求体
  let body = event.body;
  if (event.isBase64Encoded) {
    body = Buffer.from(body, 'base64').toString('utf8');
  }
  const payload = JSON.parse(body);
  const name = payload.name;
  const email = payload.email;
  
  // 后续业务逻辑
  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Content-Type"
    },
    body: JSON.stringify({message: "提交成功"})
  };
};

第三步：检查API Gateway配置 #

• 确认你的API集成类型为「Lambda代理集成」，只有代理集成才会把完整的请求信息（包括body）透传给Lambda
• 确认API的CORS配置已经开启，允许Content-Type请求头、允许POST请求方法

完成以上修改后即可正常获取前端提交的姓名和邮箱数据。

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