React+Node项目登录错误无法在前端显示求助

核心问题在于你的Node服务器返回错误提示时，使用的是默认200的HTTP状态码，而Axios只有当响应状态码大于等于400时才会触发catch块。所以即使你返回了错误信息，前端的try块依然会执行，不会进入catch设置错误提示。

修复步骤 #

1. 修改Node后端登录路由，返回正确的错误状态码 #

把错误场景的响应改为对应HTTP状态码（比如用户不存在用404，密码错误用401），同时将提示文本改为中文：

router.post("/login", async (req, res) => {
  const { identifier, password } = req.body;
  console.log("Login request:", identifier, password);

  const user = await UserModel.findOne({
    $or: [{ username: identifier }, { email: identifier }],
  });
  console.log("User found:", user);

  if (!user) {
    console.log("User not found");
    // 用户不存在返回404状态码+中文提示
    return res.status(404).json({ message: "用户不存在！" });
  }

  const isPasswordValid = await bcrypt.compare(password, user.password);
  console.log("Is password valid:", isPasswordValid);

  if (!isPasswordValid) {
    console.log("Incorrect password");
    // 密码错误返回401状态码+中文提示
    return res.status(401).json({ message: "用户名或密码错误" });
  }

  const token = jwt.sign({ id: user._id }, "secret");
  console.log("Login successful. Token:", token);
  res.json({ token, userID: user._id });
});

2. 前端代码保持现有逻辑即可 #

当前端的Axios请求收到404/401这类错误状态码时，会自动进入catch块，此时err.response.data.message就能正确获取到中文错误提示并显示在页面上。

你提到控制台已经能收到错误响应对象，说明错误数据确实能传到前端，只是因为状态码的问题没进入catch，修改后端状态码后就能解决这个问题。

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