在 Nuxt 3 中，useRequestHeaders('referrer') 在 app.vue 中常返回 undefined，因其执行时机与 SSR/CSR 上下文不匹配；正确做法是在通用插件中捕获 Referer，并通过 Pinia 持久化，再安全复用于后续请求（如 useFetch）。
在 nuxt 3 中，`userequestheaders('referrer')` 在 `app.vue` 中常返回 `undefined`，因其执行时机与 ssr/csr 上下文不匹配；正确做法是在通用插件中捕获 referer，并通过 pinia 持久化，再安全复用于后续请求（如 `usefetch`）。
Nuxt 3 的服务端渲染（SSR）与客户端水合（hydration）机制决定了请求头（如 Referer）仅在服务端上下文或特定生命周期钩子中可靠可用。直接在 app.vue 的 setup() 中调用 useRequestHeaders() 无法保证执行环境——它可能在纯客户端运行，此时浏览器不会暴露原始请求头，导致 headers['referrer'] 为 undefined。
✅ 推荐方案：使用通用插件（Universal Plugin）捕获 + Pinia 全局存储
首先，创建一个不带 .client. 或 .server. 后缀的插件（确保其在 SSR 和 CSR 阶段均执行），在服务端优先读取 Referer 头，并存入 Pinia store：
// plugins/initial.ts
import { defineNuxtPlugin } from '#app'
import { useReferrerStore } from '~/store/referrer'
export default defineNuxtPlugin(async (nuxtApp) => {
// ✅ 安全获取 Referer：仅在服务端有真实值，客户端 fallback 为空字符串
const headers = useRequestHeaders(['referer'])
const referrer = headers.referer || ''
const referrerStore = useReferrerStore(nuxtApp.$pinia)
referrerStore.setReferrer(referrer)
})
接着，定义一个类型安全的 Pinia store 来管理该值：
// stores/referrer.ts
import { defineStore } from 'pinia'
export const useReferrerStore = defineStore('referrer', {
state: () => ({
_referrer: '' as string
}),
getters: {
referrer: (state) => state._referrer
},
actions: {
setReferrer(value: string | undefined | null) {
this._referrer = value ?? ''
}
}
})
之后，在任意组件或组合式 API 中即可安全使用：
// 示例：在页面中发起带 referer 头的请求
const { data, error } = await useFetch('/api/track', {
headers: {
'X-Referer': useReferrerStore().referrer // ✅ 可靠获取
}
})
⚠️ 关键注意事项：
- 浏览器出于隐私策略（如 Referrer Policy）可能主动剥离或简化
Referer头，尤其跨协议（HTTP→HTTPS）或跨域重定向时； - 若你依赖
http://localhost→http://localhost:3000的反向代理重定向，请确保代理层（如 Nginx）透传该头：
# nginx.conf
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header Referer $http_referer; # ✅ 显式透传
}
- 不要依赖
document.referrer替代服务端Referer头——前者是客户端历史信息，易被篡改且不包含初始 SSR 请求来源。
综上，将 Referer 捕获逻辑下沉至 universal plugin、借助 Pinia 实现跨组件/跨请求状态共享，是 Nuxt 3 中兼顾 SSR 正确性与客户端可用性的最佳实践。
