为什么我不能通过 javascript 访问这个 cookie？答案

【问题标题】：Why can't I access this cookie via javascript?为什么我不能通过 javascript 访问这个 cookie？
【发布时间】：2021-07-01 09:37:31
【问题描述】：

我的服务器向前端发送一个locale cookie，后端根据客户端的接受语言标头确定该cookie。当我在localhost 上运行后端和前端时，我可以在浏览器的document.cookie 中访问javascript 中的locale cookie。它在 chrome devtools 中也可见（Application Tab-> Cookies）。

但是当我通过 https 远程运行后端和前端时，我无法在浏览器的 javascript 中访问 cookie。在 devtools 中也不可见（Application Tab-> Cookies）。

document.cookie // no locale cookie in javascript devtools console
"_ga=somevalue; _gid=somevalue; __stripe_mid=somevalue; __stripe_sid=somevalue"

但我可以在响应的Set-Cookie 标头和chrome://settings/cookies/ 中看到locale cookie。

回复：

设置 Cookie：区域设置=%7B%22locale%22%3A%22en-US%22%2C%22countryCode%22%3A%22US%22%2C%22languageCode%22%3A%22en%22%7D；最大年龄=1617632；路径=/;过期=2021 年 4 月 24 日星期六 07:34:03 GMT；安全的; SameSite=无

chrome://settings/cookies/:

名称：区域设置
内容 : %7B%22locale%22%3A%22en-US%22%2C%22countryCode%22%3A%22US%22%2C%22languageCode%22%3A%22en%22%7D
域：mydomain.herokuapp.com
路径：/
发送为：仅安全连接
可访问脚本 ：是
已创建：2021 年 4 月 5 日星期一上午 9:25:27
到期：2021 年 4 月 24 日星期六 2:45：上午 56 点

我知道您不能在 javascript 中访问仅 HTTP cookie，但它不是仅 HTTP cookie。它设置为安全，但没关系“具有此属性的 Cookie 仍然可以通过访问客户端的硬盘来读取/修改，或者如果未设置 HttpOnly cookie 属性，则可以从 JavaScript 读取/修改。” src。它也是一个跨域cookie，我的后端在mydomain.herokuapp.com 上运行，我的前端在mydomain.netlify.app 上运行。

什么会导致 javascript 无法访问此 cookie？

【问题讨论】：

没有跨域cookies这样的东西。您不能在其他域中设置 cookie。
谢谢。我现在将它切换到同一个域，但不同的子域，它仍然无法正常工作。它不应该跨不同的子域工作吗？
您只能在同一个域或父域中设置cookies。不跨子域。
在阅读此stackoverflow.com/questions/32354962/… 后，通过将域设置为mydomain.com，我能够使其与不同的子域一起使用

标签： javascript google-chrome cookies google-chrome-devtools

【解决方案1】：

问题是如果 cookie 设置为前端应用程序的域，则前端只能通过 javascript 读取 cookie。但是后端和前端位于完全不同的域上。而且由于后端位于完全不同的域上，因此无法在前端域上的 cookie 上进行设置。所以我把它们移到了同一个域的子域——frontend.mydomain.com 和 backend.mydomain.com。然后我将cookie设置为mydomain.com，如here所述。

    res.cookie('locale', JSON.stringify(localeObj), {
      maxAge: new Date() * 0.001 + 300,
      domain: 'mydomain.com',
      secure: true,
      sameSite:'none',
    });

【讨论】：