Nuxt v3如何将服务端请求头值传入router.options.ts？

我想获取传入请求的请求头，并在router.options.ts中使用它的值。查阅Nuxt 3文档后，我认为应使用服务端中间件捕获请求头值，但不清楚该将其存储在何处才能在router.options.ts中访问。

我的示例代码如下：

服务端中间件（/server/middleware/example.ts） #

export default defineEventHandler((context) => {
  context.example = 'value'
})

路由配置（/router.options.ts） #

export default <RouterConfig> {
  routes: (_routes) => {
    const nuxtApp = useNuxtApp()

    if (nuxtApp.ssrContext?.event.context.example) {
      console.log("example is available")
    } else {
      console.log("example is not available")
    }
  }
}

目前遇到的问题：初始服务端渲染时能输出example is available，但客户端会输出example is not available。我尝试了多种方法均未解决，不清楚router.options.ts在应用生命周期中的调用时机，也不知道如何提前设置请求头值。我找到过类似实现示例，但该示例在服务端值不可用时会使用 fallback 值，不符合我的需求。

核心问题剖析 #

router.options.ts在Nuxt 3中的执行时机分两种场景：

• 服务端：在SSR请求初始化阶段执行，此时能拿到ssrContext
• 客户端：在浏览器应用加载时执行，没有ssrContext，因此无法直接获取服务端中间件存在event.context里的值

要让客户端也能访问到请求头的值，核心是把服务端获取到的值序列化后传递到客户端。

具体实现步骤 #

1. 修改服务端中间件，存储并传递请求头值
   更新/server/middleware/example.ts，用Nuxt的useState创建跨端状态，服务端设置后会自动序列化传给客户端：

export default defineEventHandler((event) => {
  // 替换成你要获取的请求头，比如X-Custom-Header
  const targetHeader = getHeader(event, 'X-Custom-Header')
  
  // 创建跨端状态，服务端赋值后客户端可直接读取
  useState('requestHeader', () => targetHeader)
})

2. 在router.options.ts中访问跨端状态
   修改/router.options.ts，直接通过useState获取值，无需依赖ssrContext：

export default <RouterConfig> {
  routes: (_routes) => {
    const requestHeader = useState('requestHeader')
    
    if (requestHeader.value) {
      console.log("请求头值已获取:", requestHeader.value)
      // 这里可以根据请求头值修改路由配置，比如动态添加路由、修改路由元信息等
    } else {
      console.log("未获取到请求头值")
    }
    
    return _routes
  }
}

关键注意事项 #

• useState是Nuxt官方推荐的跨端状态方案，自动处理服务端值的序列化与客户端hydration，无需手动传递
• 避免直接依赖ssrContext，该对象仅存在于服务端渲染阶段
• 如果请求头包含敏感信息，禁止传递到客户端，防止数据泄露

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