如何从 Nuxt 3 服务器访问 httpOnly cookies

Question

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

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

谢谢。

Answer 1

不确定这是否是正确的方法，但这是我曾经通过类似案例获得的解决方案 - do.net 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，并且服务器应该能够读取它。