Nuxt3中useAsyncData+$fetch+watch监听时无法携带Cookie请求头问题

需要携带Cookie从中间件服务器获取数据。首次打开页面时数据请求正常，但当页码（currentPage.value）变更触发watch监听后，请求出现异常。通过Wireshark抓包发现，首次请求会发送Cookie请求头，而页码变更后的请求未携带该请求头，请问如何配置才能让监听触发的请求也携带Cookie？

代码示例 #

const currentPage = ref(1);
const { data } = await useAsyncData(
  "middleware-data",
  () =>
    $fetch("/path/xx.json", {
      method: "GET",
      baseURL: targeturl,
      headers: useRequestHeaders(["cookie"]),
      params: {
        page: currentPage.value,
      },
    }),
  { watch: [currentPage] }
);

抓包对比 #

• 首次请求抓包（Wireshark）：
  
• 页码变更后请求抓包（Wireshark）：
  

问题原因 #

useRequestHeaders(["cookie"]) 只会在组件初始化的服务端渲染阶段获取一次Cookie值，这个值是静态的。当watch触发重新请求时，代码在客户端执行，此时useRequestHeaders无法再获取到服务端的请求头Cookie，导致后续请求丢失Cookie。

解决办法 #

办法一：用全局状态管理存Cookie（比如Pinia）

1. 服务端初始化时把Cookie存入状态管理：

// 可放在app.vue或专属插件中
if (process.server) {
  const cookie = useRequestHeaders(["cookie"]).cookie;
  // 假设你有个Pinia store叫useCookieStore，里面有setCookie方法
  useCookieStore().setCookie(cookie);
}

2. 请求时从状态管理中读取Cookie：

const cookieStore = useCookieStore();
const { data } = await useAsyncData(
  "middleware-data",
  () =>
    $fetch("/path/xx.json", {
      method: "GET",
      baseURL: targeturl,
      headers: {
        cookie: cookieStore.cookie || useRequestHeaders(["cookie"]).cookie
      },
      params: {
        page: currentPage.value,
      },
    }),
  { watch: [currentPage] }
);

办法二：用useCookie直接获取单个Cookie

如果只需要特定Cookie字段，用Nuxt的useCookieAPI更方便，它在客户端和服务端都能正常工作：

// 替换成你实际的Cookie名称
const sessionCookie = useCookie("session_id");
const { data } = await useAsyncData(
  "middleware-data",
  () =>
    $fetch("/path/xx.json", {
      method: "GET",
      baseURL: targeturl,
      headers: {
        // 拼接成标准Cookie格式
        cookie: `session_id=${sessionCookie.value}`
      },
      params: {
        page: currentPage.value,
      },
    }),
  { watch: [currentPage] }
);

办法三：给$fetch加全局拦截器

在Nuxt插件中配置全局请求拦截，让所有$fetch请求自动带上Cookie：

// 在plugins目录新建fetch.client.js
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.hook('fetch:before', (ctx) => {
    const cookie = useCookieStore().cookie || useRequestHeaders(["cookie"]).cookie;
    if (cookie) {
      ctx.options.headers = {
        ...ctx.options.headers,
        cookie
      };
    }
  });
});

额外注意事项 #

• 若为跨域请求，需确保Cookie的SameSite属性配置正确（如SameSite=None需配合Secure属性，仅HTTPS环境可用），避免被浏览器拦截。
• 中间件服务器必须返回Access-Control-Allow-Credentials: true响应头，前端请求需开启凭证（$fetch默认已处理，自定义fetch需手动添加credentials: 'include'）。

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