时间戳

首页 > 解决方案 > HTTP cookie 不适用于 localhost 子域

node.js - HTTP cookie 不适用于 localhost 子域

问题描述

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

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

这些尝试都没有产生任何影响，所以我在这一点上有点迷茫。我唯一能做的另一件事就是将我的应用程序部署到合适的服务器上，然后运行我的开发，但我真的真的不想这样做，我想我应该能够从我的本地机器上进行开发。

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

这就是我现在的设置：

在 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)
    })

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

标签： node.jsexpresscookies

解决方案

如果 httpOnly 为真，则无法通过客户端 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，这应该可以工作

推荐阅读