Spring Boot返回HTTP错误时React前端Axios无法捕获处理响应

Axios默认的响应判定规则是只有HTTP状态码落在200-299区间的响应，才会被标记为请求成功进入then回调，其余所有状态码（包括你碰到的401、403、500这类错误状态）都会被判定为请求失败，直接抛出错误走catch分支。
你现在的代码只写了then里的成功处理逻辑，完全没处理错误分支，自然拿不到后端返回的错误内容。你之前看到的错误栈不是没带响应数据，是你找错了位置：错误对象下的error.response字段就是完整的响应对象，结构和成功回调里拿到的res完全一致，包含状态码、响应头、后端返回的消息体。

选一种适配你项目逻辑的方式就行。

方案1：单请求添加catch捕获错误 #

适合只需要在个别接口单独处理错误的场景，直接在现有请求后追加catch分支，从error.response里取后端返回的内容：

if (request.type === AuthType.LOGIN) {
  const { email, password } = request.data;
  UserAuthService.login(request.data)
    .then(res => {
      // 2xx状态码走这里，写正常业务逻辑
      console.log(res);
    })
    .catch(error => {
      // 非2xx状态码走这里，处理错误逻辑
      if (error.response) {
        // 服务端正常返回了错误响应（就是你现在碰到的401、403场景）
        const { status, data } = error.response;
        // 这里就能拿到你后端返回的"Error Message"，直接按状态码做分支处理即可
        console.log('错误状态码：', status);
        console.log('后端返回的错误内容：', data);
      } else if (error.request) {
        // 请求发出去了但没收到响应，一般是网络断开、跨域被拦截、后端没启动导致的
        console.log('网络异常，未收到服务端响应');
      } else {
        // 请求初始化阶段就出错，比如参数配置格式不对
        console.log('请求配置错误：', error.message);
      }
    });
}

方案2：全局配置统一处理错误 #

适合项目里接口多，不想每个请求重复写错误处理逻辑的场景，可以在创建Axios实例时自定义状态码校验规则，或者加响应拦截器做全局统一处理。
如果想让所有状态码（包括4xx、5xx）都进入then回调，直接在实例配置里加validateStatus即可：

export default axios.create({
  baseURL: `${url}`,
  headers: {
    "Content-type": "application/json",
    Authorization: axiosHeader(),
  },
  // 自定义状态码判定规则，返回true就进then，返回false就进catch
  validateStatus: function (status) {
    return status >= 200 && status < 600; // 2xx到5xx的状态码全部进入then，业务代码里自行判断状态码处理
  }
});

更通用的做法是加全局响应拦截器，把通用错误逻辑（比如401跳登录、403弹无权限提示）统一收口处理：

const request = axios.create({
  baseURL: `${url}`,
  headers: {
    "Content-type": "application/json",
    Authorization: axiosHeader(),
  }
});

// 响应拦截器
request.interceptors.response.use(
  response => {
    // 2xx状态码直接返回给业务层
    return response;
  },
  error => {
    // 非2xx状态码统一在这里做通用处理
    if (error.response) {
      const { status } = error.response;
      switch(status) {
        case 401:
          // 清空本地存储的token、跳转登录页
          break;
        case 403:
          // 弹出无权限访问提示
          break;
        default:
          // 其他错误默认打印后端返回的消息
          console.log('请求失败：', error.response.data);
      }
    }
    // 处理完通用逻辑后把错误抛出去，个别需要特殊处理的接口可以自己加catch捕获
    return Promise.reject(error);
  }
);

export default request;

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