Next.js提交表单到Supabase时API路由req.body为undefined如何解决？

问题根源 #

你的问题完全出在前端fetch请求的参数配置错误，有两处不符合请求规范：

• 直接向fetch的body参数传入JS原生对象：fetch不会自动对JS对象做序列化处理，会默认将对象转为[object Object]字符串，后端无法识别有效内容
• 请求头Content-Type错误设置为text/plain：后端会按照纯文本格式解析请求体，不会自动转为JSON对象，自然无法通过req.body.xxx读取对应字段

修复方案 #

直接修改前端formSubmitHandler里的fetch请求逻辑即可：

const formSubmitHandler = async (event) => {
  event.preventDefault();

  await fetch("api/dbhandler", {
    method: "POST",
    // 1. 把对象序列化为JSON字符串
    body: JSON.stringify({
      firstname: firstName,
      secondname: secondName,
      street: streetAddress,
      phone: phoneNumber,
      email: emailAddress,
      postal: postalCode,
      about: quoteDescription,
    }),
    // 2. 修正Content-Type为JSON类型
    headers: {
      "Content-Type": "application/json",
    },
  });
};

可选校验步骤 #

如果修改后还有问题，可以按以下步骤快速定位：

1. 打开浏览器调试工具的「网络」面板，找到发送到api/dbhandler的POST请求，查看「请求载荷」是否为正常的JSON格式
2. 后端先打印完整的req.body，确认整体是否为undefined：如果是Next.js框架默认是开启请求体自动解析的，不需要额外配置；如果是Express等框架，需要确保提前注册了express.json()中间件

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