如何在React前端通过Axios获取Node.js/Express后端返回的自定义错误信息

嘿，我完全懂你现在的困扰——明明后端在特定场景下返回了自定义错误消息，结果前端用Axios拿到的却是一堆HTML代码，根本捞不到想要的核心信息对吧？别慌，咱们从后端到前端一步步排查解决：

第一步：确保后端（Node/Express）返回JSON格式的错误响应 #

问题的根源大概率在后端：默认情况下，Express如果遇到未处理的错误，或者你直接throw new Error()，它会自动生成一个HTML格式的错误页面，而不是你想要的JSON。所以咱们得手动控制错误返回的格式：

1. 业务逻辑里直接返回JSON错误 #

比如在登录接口的参数校验环节，不要依赖默认错误，主动构造JSON响应：

// 后端登录接口示例
app.post('/api/v1/user/login', (req, res) => {
  const { username, password } = req.body;
  
  // 参数校验不通过时
  if (!username || !password) {
    // 设置合适的HTTP状态码（比如400表示客户端参数错误），然后返回JSON
    return res.status(400).json({
      success: false,
      message: 'Please provide username and password'
    });
  }
  
  // 其他登录逻辑...
});

2. 全局错误处理中间件也要返回JSON #

如果你的项目用了全局错误捕获中间件，一定要确保它输出JSON而不是HTML：

// Express全局错误处理中间件
app.use((err, req, res, next) => {
  // 自定义状态码，没有的话默认500（服务器内部错误）
  const statusCode = err.statusCode || 500;
  res.status(statusCode).json({
    success: false,
    // 优先用自定义错误消息，没有就用默认提示
    message: err.message || 'Internal Server Error',
    // 可选：开发环境返回堆栈信息方便调试，生产环境可以去掉
    stack: process.env.NODE_ENV === 'development' ? err.stack : undefined
  });
});

第二步：前端（React + Axios）正确捕获并提取错误消息 #

你现在的代码已经在catch块里尝试访问error.response.data了，这方向是对的。现在后端返回JSON后，你就能直接拿到自定义的message字段了，还可以优化一下异常处理的边界情况：

const Login = () => {
  // 给formData初始化默认值，避免可选链的不必要使用
  const [formData, setFormData] = useState({ username: '', password: '' });
  // 可以加个状态专门存错误消息，方便展示给用户
  const [errorMessage, setErrorMessage] = useState('');

  const handleLoginUser = async () => {
    // 每次请求前清空之前的错误消息
    setErrorMessage('');
    try {
      const res = await axios.post("/api/v1/user/login", formData);
      // 登录成功后的逻辑，比如跳转到主页或者存储token
      console.log('登录成功', res.data);
    } catch (error) {
      // 分情况处理异常
      if (error.response?.data?.message) {
        // 拿到后端返回的自定义错误消息
        const backendMsg = error.response.data.message;
        setErrorMessage(backendMsg);
        console.log('错误详情:', backendMsg);
      } else if (error.request) {
        // 服务器收到请求但没有返回响应（比如超时）
        setErrorMessage('服务器无响应，请稍后重试');
      } else {
        // 其他请求层面的错误（比如配置错误）
        setErrorMessage('请求失败，请检查网络或重试');
      }
    }
  };

  // 渲染表单和错误消息的逻辑...
};

几个额外注意点 #

• 别再用throw new Error('xxx')然后不管它了，Express默认会把这种错误转为HTML页面，一定要用res.status().json()主动返回。
• 如果你的后端用了express-validator这类校验中间件，记得配置它返回JSON格式的错误，而不是默认的HTML。
• 确认请求地址没有问题：如果是跨域场景，要确保后端配置了CORS，但你能拿到HTML响应，说明请求已经到达后端了，主要还是返回格式的问题。

备注：内容来源于stack exchange，提问作者Gurkirat Singh