我如何在页面重新加载Nuxt 3时在服务器端服务器/api上获取cookie

Question

嗨，我正在使用 Nuxt 3，我正在尝试在服务器/api 上设置和获取 cookie。我有两个页面index.vue和about.vue以及两个服务器/api文件setcookie.get.js和getcookie.get.js。在index.vue中，通过按钮向/api/setcookie发出请求，单击以设置cookie。在 about.vue 中向 /api/getcookie 发出请求，这将在终端中控制台 cookie。最初它工作正常，因为您可以在终端中看到 cookie，也在页面导航中您可以在终端中获取 cookie，但是当我重新加载页面时，cookie 变成空对象，正如您在终端中看到的那样，所以我的问题是如何获取 cookie页面也重新加载。请注意，我有 httpOnly true 和 httpOnly false，但在重新加载后我没有得到它们。

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>

页面/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>

服务器/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' };
});

服务器/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' };
});

Answer 1

7 个月前，但我会放弃我的答案，如果你解决了这个问题，你可以回复这个答案

cookie 使用 httpOnly: true 保存在服务器端，并且可以从 httpOnly: false 的浏览器访问 cookie，因此在第一次重新加载页面时它为空，因为对 API 的第一个请求是在服务器端（其中无法访问 cookie，因为它不是浏览器），而不是浏览器。我有这样的相同用例，并奋斗了一个月，经过研究，这就是工作原理。如果你想创建一个中间件，在过期后使用刷新令牌刷新访问令牌，也许你可以再考虑一下