为什么我无法通过 javascript 访问此 cookie？

Question

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

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

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

但我可以在响应的Set-Cookie header 和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； 安全的; 相同站点=无

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

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

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

Answer 1

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

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