HTTP cookie 不适用于 localhost 子域

Question

我有一个节点/express API，它将创建一个 HTTP cookie 并将其传递到我的 React 应用程序进行身份验证。该设置基于 YouTube 上 Ben Awad 的 JWT HTTP Cookie 教程（如果您熟悉的话）。当我在本地主机（localhost：4444）上运行网站时，一切正常。我现在遇到的问题是我的应用程序现在使用子域来处理工作区（类似于 JIRA 或 Monday.com 使用子域来指定工作区/团队）。每当我在子域上运行我的应用程序时，HTTP cookie 就会停止工作。

我已经查看了很多有关此问题的线程，但找不到解决方案，无论我尝试什么，cookie 都不会保存到我的浏览器中。以下是我迄今为止尝试过的目前没有运气的事情：

• 我尝试过在 cookie 上指定域。有.和没有
• 我已更新我的主机文件以使用域作为本地主机的掩码。像 myapp.com:4444 之类的东西指向 localhost:4444
• 我尝试了一些奇特的配置，发现我也能够隐藏端口，因此 myapp.com 指向 localhost:4444。
• 我尝试过 Chrome、Safari 和 Firefox
• 我已确保不存在 CORS 问题
• 我已经尝试过 cookie 的安全设置。
• 我还设置了一个 ngrok 服务器，以便有一个已发布的域可以在浏览器中运行

这些尝试都没有产生任何作用，所以我现在有点不知道该怎么做。我唯一能做的另一件事是将我的应用程序部署到适当的服务器，然后运行我的开发，但我真的不想这样做，我认为我应该能够从我的本地计算机进行开发。

我的饼干知识有点贫乏，所以也许我遗漏了一些明显的东西？

这就是我现在的设置：

在API上，我有一个route( /refresh_token)，它将创建一个新的express cookie，如下所示：

export const sendRefreshToken = (res: Response, token: string): void => {
  res.cookie('jid', token, {
    httpOnly: true,
    path: '/refresh_token',
  });
};

然后在前端，它实际上会在加载时运行此调用：

fetch('http://localhost:3000/refresh_token', {
      credentials: 'include',
      method: 'POST'
    }).then(async res => {
      const { accessToken } = await res.json()
      setState({ accessToken, workspaceId })
      setLoading(false)
    })

这看起来非常简单，但在子域上时一切都会停止工作。此时我完全迷失了。如果您有任何想法，那就太好了！

Answer 1

如果 httpOnly 为 true，则客户端 js 无法解析它。要在子域上使用 cookie，请将域设置为主域 (xyz.com)，例如 BE 中的：

res.cookie('refreshToken', refreshToken, {
  domain: authCookieDomain,
  path: '/',
  sameSite: 'None',
  secure: true,
  httpOnly: false,
  maxAge: cookieRefreshTokenMaxAgeMS
});

并在 FE 上添加 withCredentials: true 作为 axios 选项或凭证：包含 fetch，这应该可以工作