如何從 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，並且服務器應該能夠讀取它。