javascript - 如何从 Nuxt 3 服务器访问 httpOnly cookie

Question

我正在为网站项目实现登录功能。后端是 Express，前端是 Nuxt 3。在成功验证用户登录后，Express 后端向网络服务器返回必要的数据，然后创建一个 httpOnly cookie 并在 Pinia 存储中设置任何必要的数据。在页面刷新时，我希望 Nuxt 3 服务器查看 cookie 并设置 Pinia 存储(因为它在页面刷新时丢失)。

有人可以提供一些指导吗？我查看了 useNuxtApp() 可组合项，我可以在 nuxtApp.ssrContext.req.headers.cookie 中看到 cookie，但这仅提供 K/V 配对所有设置的 cookie，我需要对其进行解析。我知道 useCookie 可组合项，但它仅在生命周期 Hook 期间有效，它似乎只能解析未定义。

谢谢。

Answer 1

不确定这是不是正确的方法，但这是我曾经通过类似案例获得的解决方案 - dotnet api + nuxt3 客户端。

首先，我们需要代理 API(在您的情况下表示)，这将成功，因此我们的 cookie 位于同一域中，浏览器将开始将其发送到/api/端点。

1. 安装@nuxtjs-alt/proxy - npm i @nuxtjs-alt/proxy。
2. 将配置添加到 nuxt.config.ts(我的 api 在 localhost:3000 上运行):

nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs-alt/proxy'
  ],
  proxy: {
    enableProxy: true,
    fetch: true,
    proxies: {
      '/proxy': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/proxy/, '')
      }
    }
  }
});

然后我们可以使用代理而不是直接调用在客户端的任何位置设置 cookie 的请求。

在客户端的任何地方，使用新设置的代理而不是直接调用 API 来发出请求。

根据您的设置调整参数。

await $fetch('/proxy/user/sign-in', {
  method: 'POST',
  body: {
    email: 'example@mail.com',
    password: 'password'
  }
});

最终，应该在我们的客户端域上设置一个 cookie。

最后，当我们处理客户端请求时 - 我们读取 cookie 并设置转发请求。相应地替换 COOKIE_NAME 和 API URL。

server/api/user/me.get.ts:

export default defineEventHandler(async (event) => {
  return await $fetch('http://localhost:3000/user/me', {
    headers: {
      Cookie: `COOKIE_NAME=${
        getCookie(event, 'COOKIE_NAME')
      }`
    }
  });
});

API 调用将使用我们在使用 cookie 进行第一个请求时获得的相同 cookie，并且服务器应该能够读取它。