如何从 Nuxt 3 服务器访问 httpOnly cookie答案

【问题标题】：How to access httpOnly cookies from Nuxt 3 server如何从 Nuxt 3 服务器访问 httpOnly cookie
【发布时间】：2022-11-14 03:36:03
【问题描述】：

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

有人可以提供一些指导吗？我看过使用 NuxtApp()可组合的，我可以看到 cookienuxtApp.ssrContext.req.headers.cookie，但这仅提供了所有设置的 cookie 的 K/V 配对，我需要对其进行解析。我知道 useCookie 可组合，但这仅在生命周期挂钩期间有效，这似乎只能解决不明确的.

谢谢。

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： javascript vue.js cookies nuxtjs3

【解决方案1】：

不知道这是否是正确的方法，但这是我用来解决类似案例的解决方案 - dotnet api + nuxt3 客户端。

首先，我们需要代理 API（在您的情况下表示），这样就成功了，所以我们的 cookie 在同一个域上，浏览器将开始将它发送到 /api/ 端点。

安装@nuxtjs-alt/proxy - npm i @nuxtjs-alt/proxy。
将配置添加到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，并且服务器应该能够读取它。

【讨论】：