Nuxt 3路由中间件中为特定页面添加响应头的方法

针对你的需求，这里有三种实用方案，既能避免全局服务器中间件的影响，又能灵活控制响应头的添加：

方案一：路由匹配的服务器中间件 #

在server/middleware目录下创建专属中间件文件（比如custom-page-headers.ts），通过判断请求路径仅对特定页面生效：

export default defineEventHandler((event) => {
  const targetPaths = ['/about', '/products', '/blog/posts']
  const requestPath = event.node.req.url?.split('?')[0] || ''
  
  if (targetPaths.includes(requestPath)) {
    // 添加自定义响应头
    setResponseHeader(event, 'X-Custom-Page-Header', 'TargetPageValue')
  }
})

这种方式适合批量匹配固定路径，中间件只会处理符合条件的请求。

方案二：页面组件内直接设置 #

在需要添加响应头的页面组件中，利用Nuxt3的服务端API在服务器环境下设置头：

<script setup>
const event = useRequestEvent()
// 仅在服务器端执行，避免客户端报错
if (process.server) {
  setResponseHeader(event, 'X-Page-Specific-Header', 'AboutPage')
}
</script>

适合单个页面的独立需求，无需额外中间件文件。

方案三：命名路由中间件（结合to/from参数） #

如果你需要通过to/from路由参数做更灵活的判断，可以创建命名路由中间件，仅在指定页面引用：

1. 创建中间件文件middleware/custom-route-header.ts：

export default defineNuxtRouteMiddleware((to, from) => {
  // 根据to/from参数判断路由，比如仅在从首页跳转到关于页时添加
  if (to.path === '/about' && from.path === '/') {
    if (process.server) {
      const event = useRequestEvent()
      setResponseHeader(event, 'X-Route-Transition-Header', 'HomeToAbout')
    }
  }
})

2. 在目标页面中引用该中间件：

<script setup>
definePageMeta({
  middleware: 'custom-route-header'
})
</script>

这种方式完全满足你对to/from参数的需求，且中间件仅作用于引用它的页面。

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