HTTP cookie 不适用于 localhost 子域答案

【问题标题】：HTTP cookies are not working for localhost subdomainsHTTP cookie 不适用于 localhost 子域
【发布时间】：2021-08-12 00:00:18
【问题描述】：

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

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

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

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

我的 cookie 知识有点贫乏，所以也许我缺少一些明显的东西？

这就是我现在的设置：

在 API 上，我有一个路由 (/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)
    })

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

【问题讨论】：

看看这个答案：stackoverflow.com/a/57803192/9316174
您的服务器是否知道域和子域，以便创建适当的 cookie？你能展示你试图在cookie中强制域的内容吗？使用 Postman 之类的方法执行请求还可以帮助您查看原始 HTTP 请求和响应，并验证您是否尊重上述评论中的描述。
这是一个很长的镜头，但我注意到您的前端调用包含硬编码的“localhost”URL。如果 cookie 的域与源不匹配，浏览器可能不会将凭据 cookie 附加到此调用。改用相对路径

标签： node.js express cookies

【解决方案1】：

如果 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 选项或凭据：include with fetch，这应该可以工作

【讨论】：