使用await fetch向Node.js发POST JSON请求时服务端req.body为空如何解决

问题根因 #

你遇到的问题主要由3个错误叠加导致：

• 前端fetch配置参数名错误，导致请求头未正确传递，服务端无法识别JSON格式的请求体
• 服务端未对数据库查询结果做非空判断，空值调用属性直接抛出类型错误
• bodyParser引用方式不规范，可能存在解析失效风险

修复步骤 #

1. 修复前端fetch请求代码 #

fetch的请求头配置参数是headers，你少写了末尾的s，导致Content-Type: application/json没有正确发送到服务端，express的json解析中间件不会解析无此请求头的请求体，因此req.body为空。

修正后代码：

const req = await fetch(
    "http://localhost:3000/api/auth/signin", {
      method: "POST",
      // 修正：将header改为headers
      headers: {
        'Accept':'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: myusername,
        password: mypassword
      })
    }
  )

2. 修复路由配置的body解析逻辑 #

当前express版本已经内置了body解析能力，不需要单独引入body-parser，你之前的引用方式容易引发歧义，修正后代码：

const { verifySignUp } = require("../middleware");
const controller = require("../controllers/auth.controller");
const express = require('express');

module.exports = function(app) {
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header(
            "Access-Control-Allow-Headers",
            "x-access-token, Origin, Content-Type, Accept"
        );
        next();
    });
    // 直接使用express内置的json解析中间件
    app.use(express.json());
    app.post("/api/auth/signin", controller.signin);
};

3. 修复服务端接口的空值判断逻辑 #

你之前的代码在数据库查询不到用户时，data为null，直接访问data.password_user就会抛出你遇到的类型错误，需要补充非空校验，修正后代码：

exports.signin = (req, res) => {
    // 先校验请求参数是否为空
    if (!req.body?.username || !req.body?.password) {
        return res.status(400).send({
            message: "用户名和密码不能为空"
        });
    }
    db.findByUsername(req.body.username,(err,data) =>{
        if(err){
            if (err.kind === "not_found") {
              return res.status(404).send({
                message: "用户名或密码错误"
              });
            } else {
              return res.status(500).send({
                message: "查询用户信息失败：" + req.body.username
              });
            }
        }
        // 新增查询结果非空判断
        if (!data) {
            return res.status(404).send({
                message: "用户名或密码错误"
            });
        }
        if(data.password_user != req.body.password){
            return res.status(401).send({
                accessToken: null,
                message: "密码错误"
              });
        }
        // 补充登录成功的返回逻辑
        res.send({
            message: "登录成功",
            // 按需返回用户信息、token等字段
        });
    });
};

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