如何在Nuxt 3中实现响应后中间件以统一包装API返回结果？

要实现路由处理器完成后统一将API响应包装到result键中，你可以通过服务器中间件结合响应钩子或者手动等待路由执行后修改响应的方式实现，以下是具体方案：

方法一：使用onResponse钩子监听响应完成 #

在server/middleware目录下创建响应包装中间件，通过onResponse钩子在响应发送前修改响应体：

// server/middleware/responseWrapper.ts
export default defineEventHandler((event) => {
  // 监听响应即将发送的事件
  onResponse(async (event) => {
    // 仅处理/api开头的API路由
    if (event.node.req.url?.startsWith('/api/')) {
      // 读取原始响应内容
      const originalResponse = await readBody(event)
      // 重置响应头与响应体
      event.node.res.setHeader('Content-Type', 'application/json')
      event.node.res.end(JSON.stringify({ result: originalResponse }))
    }
  })
})

方法二：手动等待路由执行后修改响应 #

另一种方式是在中间件中先执行后续路由逻辑，再修改响应结果：

// server/middleware/responseWrapper.ts
export default defineEventHandler(async (event) => {
  // 先执行路由处理器及后续中间件
  await next(event)

  // 仅处理API路由
  if (event.node.req.url?.startsWith('/api/')) {
    const originalResponse = await readBody(event)
    // 重新包装响应内容
    event.node.res.setHeader('Content-Type', 'application/json')
    event.node.res.end(JSON.stringify({ result: originalResponse }))
  }
})

注意事项 #

• 加入路由前缀判断（/api/）是为了避免影响静态资源、页面渲染等非API响应
• 如果你的API存在非JSON格式的响应，需要额外处理响应类型判断
• Nuxt会自动加载server/middleware目录下的所有中间件，无需额外配置

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