MERN学习项目express接口返回响应在控制台显示undefined怎么解决

1. 前端fetch逻辑错误 #

fetch返回的是原始Response对象，未经过解析无法直接获取响应数据，需要调用.json()方法解析JSON格式的响应体。
修复后Login.js代码：

function myFunc(e) {
      e.preventDefault();
      fetch("http://localhost:5000/login", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ firstname: name, pass }),
      })
      .then((response) => response.json()) // 新增解析响应体的步骤
      .then((data) => {
          console.log(data); // 此处可正常拿到返回的msg字段
      });
 }

2. 后端异步逻辑时序错误 #

User.find是数据库异步操作，当前代码没有等待查询结果返回就提前执行了res.send，导致返回的msg永远是初始的空字符串；同时数据库查询结果的判断逻辑错误，result是数组不能直接和0比较，需要判断数组长度。
修复后express路由代码（使用async/await优化异步逻辑，可读性更高）：

router.post("/", async (req, res) => {
    try {
        const result = await User.find({firstname: req.body.firstname }, "password");
        let msg = "";
        if (result.length > 0) {
            if (result[0].password === req.body.pass) {
                msg = "Login Successfull";
            } else {
                msg = "Username and/or Password worng!!";
            }
        } else {
            msg = "no user found";
        }
        console.log(msg);
        res.send({ msg });
    } catch (err) {
        console.log(err);
        res.status(500).send({msg: "服务器内部错误"});
    }
});

*注意：当前代码明文存储、比对密码存在严重安全风险，生产环境需使用bcrypt等工具对密码做哈希处理。

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