Express.js服务响应无法在Chrome控制台显示，仅能在网络标签查看

点击按钮触发登录请求后，Express服务器已返回响应，但Chrome控制台无法打印该响应内容，仅能在开发者工具的Network标签中看到返回结果。

客户端代码 #

const Login = async (e) => {
  e.preventDefault();
  await axios
    .post("http://localhost:5000/login", { userLogin })
    .then((res) => {
      console.log(res);
    });
};

服务端代码 #

app.post("/login", (req, res) => {
  const { email, password } = req.body.userLogin;
  User.findOne({ username: email }).then((user) => {
    user.password == password
      ? res.json("Login successfully")
      : res.json("Your password or username is wrong");
  });
});

Network标签截图 #

问题排查与解决 #

1. 补全错误捕获逻辑
   你当前的代码只处理了请求成功的情况，没捕获异常。如果请求出现跨域、服务器错误等问题，Promise会失败但不会有任何日志输出，看起来就像then回调没执行。建议统一用async/await搭配try/catch，同时避免混用.then()：

   const Login = async (e) => {
     e.preventDefault();
     try {
       const res = await axios.post("http://localhost:5000/login", { userLogin });
       console.log("响应内容：", res);
     } catch (error) {
       console.error("请求失败：", error);
     }
   };
   

2. 修复服务端潜在bug
   服务端里User.findOne如果没找到用户，user会是null，此时访问user.password会直接抛出错误，导致服务器返回500状态码，但你没处理这个场景。加上用户存在性判断和错误捕获：

   app.post("/login", (req, res) => {
     const { email, password } = req.body.userLogin;
     User.findOne({ username: email })
       .then((user) => {
         if (!user) {
           return res.json("用户不存在");
         }
         user.password === password
           ? res.json("Login successfully")
           : res.json("账号或密码错误");
       })
       .catch((err) => {
         console.error("查询用户失败：", err);
         res.status(500).json("服务器内部错误");
       });
   });
   

3. 确认请求状态码
   查看Network标签里的响应状态码：

   • 如果是2xx（比如200），说明请求成功，那问题大概率出在客户端错误捕获缺失；
   • 如果是4xx/5xx，说明请求本身异常，原来的代码没处理错误回调，所以看不到日志。

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