Nuxt项目中自定义addresses.js中间件未执行问题求助

1. 基础文件配置问题 #

• 文件位置与命名：确认addresses.js是否放在项目根目录的middleware文件夹下，文件名需完全匹配（Nuxt对文件名大小写敏感，Addresses.js和addresses.js会被视为不同文件）。
• Nuxt版本适配：
  • 若使用Nuxt 3，中间件写法需改为：

    export default defineNuxtMiddleware(async ({ $axios, store }) => {
      // 逻辑代码
    })
    

    页面引用需通过definePageMeta：

    export default definePageMeta({
      middleware: 'addresses'
    })
    

  • 若使用Nuxt 2，当前页面引用写法正确，但需确保middleware文件夹未嵌套在其他目录下，能被Nuxt正确识别。

2. 中间件代码本身的错误（导致执行中断） #

你的代码存在几个问题，会导致中间件执行到某一步报错中断，看起来像"未执行"：

• GET请求携带data参数：HTTP GET请求规范不支持data字段，认证信息应放在请求头（如Token）或URL参数中，当前写法会导致请求异常。
• await与then混用：使用await后无需链式调用then，否则request1会是undefined（then回调默认返回undefined），后续console.log(request1.data)会抛出错误，中断执行。
• 错误日志位置：若中间件在服务端执行（SSR模式），console.log内容会输出在终端而非浏览器控制台，容易被忽略。

修复后的代码示例：

export default async ({ $axios, store }) => {
  console.log("test")
  try {
    // GET请求移除data参数，改用请求头传递认证信息（示例）
    const response = await $axios.get('http://192.168.190.112:1337/api/users/me?populate=addresses', {
      headers: {
        "Content-Type": "application/json",
        // 需替换为实际的用户认证Token：Authorization: `Bearer ${用户Token}`
      }
    })
    console.log(JSON.stringify(response.data))
    store.commit("setAddresses", [response.data])
  } catch (error) {
    console.error('请求地址列表失败:', error)
  }
}

3. 执行时机与环境问题 #

• 服务端/客户端差异：服务端执行的中间件，日志输出在终端；客户端执行的才会出现在浏览器控制台，不要混淆。
• 页面缓存问题：若页面是静态生成（nuxt generate），中间件仅在生成时执行一次，后续客户端导航不会重复触发。
• 路由匹配问题：确认引用中间件的页面路由是否正确匹配，比如动态路由参数是否正常传递，避免页面未加载导致中间件不执行。

4. 快速排查步骤 #

• 先简化中间件代码，仅保留console.log("test")，测试是否能输出，排除逻辑错误导致的中断。
• 检查nuxt.config.js，确认无禁用中间件的相关配置。
• 同时查看浏览器控制台和终端的错误日志，定位未捕获的异常。

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