如何通过Axios拦截器实现500等服务端错误自动重定向

你只需要在已有的响应错误拦截逻辑里补充5xx状态码的判断分支即可，不需要改动现有请求拦截器的逻辑。

核心修改逻辑 #

• 不要逐个枚举500、501这类状态码，直接用状态码区间判断，覆盖所有5xx类服务端错误
• 跳转逻辑优先复用项目里的前端路由实例方法，避免window.location.href触发的整页刷新；如果项目没有接入客户端路由，再用原生location跳转
• 可以加一个简单的跳转锁，避免多个并发请求同时报5xx时重复触发路由跳转

修改后的完整拦截器代码 #

// 跳转锁，防止并发请求报错时重复跳500页
let hasRedirectTo500 = false;

export const request = axios.create({ baseURL: BASE_URL_API });
request.interceptors.request.use(
  async (config: AxiosRequestConfig) => {
    try {
      const token = GetCookie('token');      

      config.headers = {
        Authorization: `Bearer ${token}`,
      };
      return config;
    } catch (errorConfig) {
      return Promise.reject(errorConfig);
    }
  },
  error => {
    return Promise.reject(error);
  },
);

// 响应拦截器
request.interceptors.response.use(
  response => {
    return response;
  },
  async (error: AxiosError) => { 
    const status = error.response?.status;
    try {
      // 原有401鉴权失败逻辑保留
      if (status === 401 && error.response?.data.error.message === "Full authentication is required to access this resource" ) {
        RemoveCookie('token')
        RemoveCookie('_currentUser')
        window.location.href = '/';
      } 
      // 新增5xx服务端错误跳转逻辑
      else if (status >= 500 && status < 600 && !hasRedirectTo500) {
        hasRedirectTo500 = true;
        // 若接入了前端路由，替换为路由实例跳转方法即可，比如Vue Router用router.push('/500')、React Router用navigate('/500')
        window.location.href = '/500';
        // 后续可在路由全局守卫中，离开/500页面时把hasRedirectTo500重置为false，保证后续报错可正常跳转
      }
      else {
        return Promise.reject(error);
      }
      return Promise.reject(error);
    } catch (errorValue) {
      return Promise.reject(errorValue);
    }
  },
);

补充说明 #

• 使用前记得在路由配置里提前注册好/500对应的服务端错误页组件
• 如果部分接口不需要触发5xx跳转（比如后台静默轮询、日志上报类接口），可以在请求config里加自定义标记，拦截器判断到对应标记时跳过跳转逻辑即可
• 如果不需要保留错误栈给上层业务处理，5xx分支执行跳转后可以不用往外抛reject，减少控制台冗余报错

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