有什么方法可以从不同的域获取存储的cookie吗？

Question

我正在使用 vuejs 开发前端，使用 Nestjs 开发后端。我在本地主机托管前端，并在另一个域（所谓的“example.com”）托管后端。所以 vuejs 运行在“localhost:5173”上，后端运行在“example.com”上。

我的后端发送带有 set-cookie 标头的授权信息以响应客户端。

问题就在这里。客户端（chrome）收到带有 set-cookie 标头的响应（域属性为“example.com”）并将这些 cookie 存储在“example.com”中。

cookie 在浏览器中可用，但我无法从 vue 访问它，因为它只能获取为“localhost”域存储的 cookie。

这是我的代码：

<template></template>

<script setup lang="ts">
import { Account } from './types';

definePage({
  meta: {
    layout: 'blank',
    isLoginProcess: true,
  },
});

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const accessToken = useCookie('accessToken').value;
if (accessToken) {
  userStore.accessToken = accessToken;
  useCookie('accessToken').value = null;
}
const account = useCookie<Account>('account').value;
if (account) {
  userStore.account = JSON.parse(JSON.stringify(account));
  useCookie('account').value = null;
}

if (route.query?.route) {
  router.push(`${route.query?.route}`);
} else {
  router.push('/');
}
</script>

如何在不同域的前端（vuejs）中获取cookie？

我想到的两种可能的方法是：

1. 找到一种方法强制后端将域更改为 localhost，以便浏览器保存 cookie，即使请求的 Host URL 和 Domain 值不同。

-> 我用谷歌搜索了如何通过 chrome 选项忽略该警告，但我找不到任何选项。 警告

2. 找到一种方法从前端获取在 example.com 下注册的 cookie，而不是使用 localhost。

-> 我正在使用 vuejs。并使用“useCookie”在浏览器中获取cookie。但它只能获取具有相同域（localhost）的cookie。所以我找不到以“example.com”作为域来获取存储的 cookie 的方法。

Answer 1

正如 deceze 在评论中提到的，您无法访问来自不同域的 cookie。您可以更新身份验证端点以在响应正文中返回

accessToken

。然后您可以使用

useUserStore

来存储它。

但请注意，如果您想将身份验证数据存储在本地存储中，它可能容易受到跨站点脚本（XSS）攻击。

请参阅此问题以获取更多信息：在基于 Web 的应用程序中正确且安全地存储 JWT 令牌的位置？