Nuxt 3中如何在Axios插件中用createError跳转至错误页

问题核心 #

你的代码已经正确捕获了Axios返回的404状态码，但直接throw createError()无法触发Nuxt3的错误页面跳转，原因在于：

1. Axios拦截器的错误回调未返回Promise.reject()，导致错误被拦截器吞掉，无法传递到Nuxt的错误处理机制
2. 拦截器处于Axios的异步上下文，直接throw的错误无法被Nuxt全局错误捕获机制识别

修复方案 #

修改Axios插件的响应拦截器，使用Nuxt提供的nuxtApp.error()方法直接触发错误页面，同时确保错误链不中断：

import axios from "axios";

export default defineNuxtPlugin((nuxtApp) => {
  const defaultUrl = process.env.NODE_ENV === "production" ?
    "https://api.xxxxx.com/api/" : "http://localhost:5000/api";

  let api = axios.create({
    baseURL: defaultUrl,
    headers: {
      common: {}
    },
  })

  api.interceptors.response.use((response) => {
    return response
  }, (error) => {
    if(error.response?.status === 401) {
      const user = useUser()
      console.log("token expires")
      user.isLoggedIn = false
      user.token = ""
      user.user = {}
      localStorage.removeItem("almowaraqi-admin")
      useRouter().push("/login")
    }
    if(error.response?.status === 404) {
      console.log("nooot fouuund")
      const errMessage = error.response.data.msg || "请求的资源未找到"
      // 使用nuxtApp实例的error方法触发自定义错误页
      nuxtApp.error({
        statusCode: 404,
        message: errMessage
      })
    }
    // 必须返回Promise.reject，保证Axios错误链不中断
    return Promise.reject(error)
  })

  return {
    provide: {
      axios: api,
    },
  };
});

关键说明 #

1. nuxtApp.error()：这是Nuxt3提供的全局错误触发方法，直接调用即可跳转到你的error.vue页面，无需手动处理路由跳转
2. 返回Promise.reject(error)：确保Axios的错误链不被中断，上层代码（如页面中的API调用）仍可选择捕获错误做自定义处理
3. 可选优化：为error.response添加可选链操作符?.，避免因网络错误（无response对象）导致的报错

验证你的error.vue #

你的error.vue代码已经正确配置，clearError({ redirect: '/' })可以正常清除错误状态并跳转到首页，无需修改。

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