浏览器没有通过 fetch 发送 cookie，尽管服务器和前端具有相同的 IP 地址（但端口不同）

Question

我已经尝试了很多方法，但浏览器仍然拒绝在我在前端发出的任何请求上设置 Cookie 标头。服务器和前端都在我的本地计算机上运行。

我创建了一个主机条目并启用了端口转发。

所以 api-v3-dev:5177 是前端，api-v3-dev:3000 是后端。

我动态地将 Access-Control-Allow-Origin 设置为请求的来源。

成功登录后，我看到类似的响应标题

set-cookie: token=eyJoZTUiLCJpZCI6; HttpOnly; SameSite=Lax
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://api-v3-dev:5177
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization, Set-Cookie, Cookie, Origin, X-Requested-With, Bearer, Accept

当我用类似的方式执行另一个获取请求时：

 const requestOptions = {
        method: 'GET',
        credentials: 'include'
    };
 fetch('http://api-v3-dev:3000/whoami', requestOptions);

由于是本地的，我无法设置 Secure & SameSite=None。

但是我读到的有关 cookie 和 SameSite 的所有内容都表明，它与 Cors 中的 Origin 不同，它确实将不同的子域和不同端口视为同一站点，因此它也应该与 SameSite=Lax 一起用于 http 连接。

Answer 1

您的浏览器收到

token=eyJoZTUiLCJpZCI6

Cookie 但不会存储它，因为它违反了以下有效性要求：

cookie 的域必须是 .local 或公共后缀的子域（请参阅 http://publicsuffix.org/ - 也称为扩展顶级域）。

在

api-v3-dev

文件中定义的主机名

hosts

既不以

.local

也不以公共后缀结尾。 （也不是

localhost

，这也可以。）

并且由于 cookie 不存储在浏览器中，因此它也不会随任何后续请求一起发送。