状态码为400时XHR不记录响应，如何获取Express接口返回的JSON内容？

问题原因 #

• axios默认的响应判定规则是：只有HTTP状态码处于2xx区间时，才会正常返回响应对象进入try逻辑；只要状态码不在2xx区间（包括你遇到的400、还有500等服务端错误码），都会直接抛出错误进入catch代码块。
• 你当前的catch块中没有读取错误对象携带的响应内容，自然拿不到后端自定义的JSON提示。

前端代码修改 #

你只需要在catch块中从错误对象里读取response属性即可获取到后端返回的JSON内容，修改后的代码如下：

const handleSubmit = async (e) => {
  e.preventDefault();
  dispatch({type: 'LOGIN_START'});
  try{
    const res = await axios.post('http://localhost:5000/api/auth/login',{
      username: userRef.current.value,
      password: passwordRef.current.value
    })
    if (res.data.success) {
      dispatch({type: "LOGIN_SUCCESS",payload: res.data})
    }
    console.log(res)
  }
  catch(err) {
    dispatch({type: "LOGIN_FAILURE"})
    // 这里读取错误响应内容
    if (err.response) {
      // err.response.data就是你后端返回的JSON对象
      const errorMsg = err.response.data.message
      console.log('错误提示：', errorMsg)
      // 接下来可以把errorMsg渲染到页面给用户做提示
    }
  }   
}

可选：修改axios全局配置调整状态码判定规则 #

如果你希望指定范围的状态码不抛出错误、进入try块处理，可以在初始化axios实例时添加validateStatus配置：

const requestInstance = axios.create({
  baseURL: 'http://localhost:5000/api',
  // 自定义状态码合法范围，示例配置是状态码小于500都算合法，不会进入catch
  validateStatus: function (status) {
    return status < 500; 
  }
});

额外的后端代码问题修复 #

你当前后端登录成功的返回代码有逻辑问题，res.json()方法只能接收一个参数，你当前的写法会导致success字段无法返回给前端：

// 错误写法
res.status(200).json(others,{
  success: true,
});

修改为合并成一个对象返回即可：

res.status(200).json({
  ...others,
  success: true,
});

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