Express.js返回404状态后如何向React前端发送JSON错误数据？

1. 服务端响应字段拼写错误 #

你当前代码中返回的JSON字段名写为erros，存在拼写错误，正确拼写应为errors。如果前端是按errors字段取值，会出现取不到数据的情况。
修正后的服务端代码如下：

router.post('/login', async (req, res) => {
  const { username, password } = req.body;

  // 校验用户是否存在
  const user = await User.findOne({ username });
  console.log('user: ', user);
  // 用户不存在时返回404
  if (!user) {
    return res.status(404).json({
      // 修正字段拼写
      errors: [
        {
          msg: '用户不存在',
        },
      ],
    });
  }
  // 其余登录校验逻辑
});

2. 前端请求库未正确读取非2xx状态的响应体 #

这是该类问题最常见的原因，不同请求库对非2xx状态码的处理逻辑不同：

• 如果你使用浏览器原生fetchAPI：默认只有网络请求本身失败才会抛出异常，4xx、5xx等HTTP错误状态不会触发catch逻辑，需要手动判断响应状态，再读取响应体内容。
  示例代码：

try {
  const res = await fetch('/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
  const resData = await res.json()
  if (!res.ok) {
    // 4xx/5xx状态在此处处理，读取返回的错误信息
    alert(resData.errors[0].msg)
    return
  }
  // 登录成功后续逻辑
} catch (err) {
  // 仅网络异常等请求本身失败会进入此处
  console.error('请求异常：', err)
}

• 如果你使用axios请求库：默认非2xx状态码的响应会被放到错误对象的response属性中，需要从该属性下读取返回的JSON数据。
  示例代码：

try {
  const res = await axios.post('/login', { username, password })
  // 登录成功后续逻辑
} catch (err) {
  if (err.response) {
    // 读取4xx/5xx状态下返回的错误信息
    alert(err.response.data.errors[0].msg)
  } else {
    // 网络异常等无响应的错误处理
    console.error('请求异常：', err)
  }
}

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