为什么我不能通过 javascript 访问此 cookie？

Question

我的服务器向前端发送一个 locale cookie，后端根据客户端的接受语言 header 确定该 cookie。当我在 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

回复：

Set-Cookie: locale=%7B%22locale%22%3A%22en-US%22%2C%22countryCode%22%3A%22US%22%2C%22languageCode%22%3A%22en%22%7D; Max-Age=1617632; Path=/; Expires=Sat, 24 Apr 2021 07:34:03 GMT; Secure; SameSite=None

chrome://settings/cookies/:

Name: locale
Content : %7B%22locale%22%3A%22en-US%22%2C%22countryCode%22%3A%22US%22%2C%22languageCode%22%3A%22en%22%7D
Domain: mydomain.herokuapp.com
Path: /
Send for: Secure connections only
Accessible to script: Yes
Created: Monday, April 5, 2021 at 9:25:27 AM
Expires: Saturday, April 24, 2021 at 2:45:56 AM

我知道您无法访问 javascript 中的仅 HTTP cookie，但它不是仅 HTTP cookie。它被设置为安全的，但这无关紧要 “具有此属性的 cookie 仍然可以 read/modified 访问客户端的硬盘，或者如果 HttpOnly cookie 属性是 JavaScript未设置。”src。它也是一个跨源 cookie，我的后端运行ning 在 mydomain.herokuapp.com 上，我的前端在 mydomain.netlify.app.

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

Answer 1

问题是如果 cookie 设置为前端应用程序的域，前端只能通过 javascript 读取 cookie。但是后端和前端在完全不同的领域。由于后端位于完全不同的域中，因此无法在前端域中设置 cookie。所以我将它们移动到同一域的子域 - frontend.mydomain.com 和 backend.mydomain.com。然后我按照 here.

的描述将 cookie 设置为 mydomain.com

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

为什么我不能通过 javascript 访问此 cookie？

Why can't I access this cookie via javascript?

javascript

cookies

google-chrome

google-chrome-devtools