Nuxt 3页面刷新时，如何在Server/API端获取Cookie？

问题 #

使用Nuxt 3时，在Server/API端设置和获取Cookie遇到如下问题：

• 在index.vue点击按钮请求/api/setcookie设置Cookie后，导航到about.vue能正常通过/api/getcookie获取Cookie并在终端打印
• 但刷新about页面后，终端打印的Cookie变为空对象
• 尝试过设置httpOnly: true/false，均无法解决页面刷新后Server/API端拿不到Cookie的问题

相关代码 #

pages/index.vue #

<script setup>
async function handleSetCookie() {
  console.log('HandleSetCookie Called');
  const options = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  };
  const { data } = await useAsyncData(() => $fetch('/api/setcookie', options));
  if (data) {
    return navigateTo('/about', { replace: true });
  }
}
</script>
<template>
  <h1>Home Page</h1>
  <button @click="handleSetCookie">Set Cookie</button>
</template>

pages/about.vue #

<script setup>
const options = {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'include', // with or without doesn't work
};
const { data } = await useAsyncData(() => $fetch('/api/getcookie', options));
</script>
<template>
  <h1>About Page</h1>
</template>

server/api/setcookie.get.js #

export default defineEventHandler(async (event) => {
  setCookie(event, 'accessToken', '34accesstoken123456', {
    sameSite: 'strict',
  });
  setCookie(event, 'refreshToken', '12refreshtoken123456', {
    sameSite: 'strict',
    httpOnly: true,
  });
  return { msg: 'setting cookie' };
});

server/api/getcookie.get.js #

export default defineEventHandler(async (event) => {
  const cookies = parseCookies(event);
  console.log('Hello Cookies', cookies);
  // console.log(event.node.req.headers.cookie);
  return { msg: 'getting cookie' };
});

解决方案 #

问题核心在于Cookie的路径配置不完整，导致页面刷新时Cookie无法被正确传递到Server端，按以下步骤修改即可解决：

1. 完善Cookie的作用范围配置
   在setcookie.get.js中为Cookie添加path: '/'和明确的domain，确保Cookie在整个站点范围内有效：

   export default defineEventHandler(async (event) => {
     setCookie(event, 'accessToken', '34accesstoken123456', {
       sameSite: 'strict',
       path: '/', // 指定Cookie作用路径为根目录，全站有效
       domain: process.env.NODE_ENV === 'development' ? 'localhost' : '你的生产域名'
     });
     setCookie(event, 'refreshToken', '12refreshtoken123456', {
       sameSite: 'strict',
       httpOnly: true,
       path: '/', // 同样添加根路径配置
       domain: process.env.NODE_ENV === 'development' ? 'localhost' : '你的生产域名'
     });
     return { msg: 'setting cookie' };
   });
   

   原理：默认情况下，setCookie会把Cookie的路径设为当前API的路径（即/api），刷新根路径下的about页面时，部分浏览器不会携带该路径的Cookie，导致Server端无法获取。

2. 简化about.vue的请求配置
   Nuxt的$fetch在SSR模式下会自动携带Cookie，无需手动添加credentials: 'include'，移除该配置避免冲突：

   <script setup>
   const { data } = await useAsyncData(() => $fetch('/api/getcookie', {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
     },
   }));
   </script>
   

修改完成后，刷新about页面时，Server端就能正常获取到Cookie值。

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