HTTP cookie不适用于本地主机子域

Question

我有一个node/express API，它将创建一个HTTP cookie并将其传递给我的React应用程序进行身份验证。如果你熟悉的话，这个设置是基于Ben Awad在Youtube上的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上，我有一个路由(/refresh_token)，将创建一个新的express cookie，如下所示:

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

然后在前端，它会在load:

时运行这个调用

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，将domain设置为主域(xyz.com)

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

和在FE上添加withCredentials: true作为axios选项或credentials: include with fetch，这应该可以工作