“响应 Cookie”中收到 HttpOnly cookie，但不会复制到浏览器 Cookie 中

Question

这是一个开发环境。我从 https://localhost:5001 运行后端 API (dotnet)，从 http://localhost:3000 运行前端 (nextjs/react)。登录请求发送到后端，后端生成 JWT 将其作为响应标头中的 HttpOnly cookie 发送，前端成功接收。

来自 DevTools 的响应标头：

Access-Control-Allow-Credentials:   true
Access-Control-Allow-Origin:        http://localhost:3000
Content-Type:                       application/json; charset=utf-8
Date:                               Wed, 15 May 2024 11:44:42 GMT
Server:                             Kestrel
Set-Cookie: token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjpbIkRlcnJpY2suR3VudGVyQGNhbmhzLmNhIiwiQ3VzdG9tT2JqZWN0Q2FuQmVBZGRlZEhlcmUiXSwibmJmIjoxNzE1NzczNDgzLCJleHAiOjE3MTYzNzgyODMsImlhdCI6MTcxNTc3MzQ4M30.F9gep20hb2cv3w4En1TS0hSKXG8ibJaMf9FwOMmgpLw; expires=Wed, 22 May 2024 11:44:43 GMT; path=/; secure; samesite=none; httponly
Vary:                               Origin

“令牌”cookie 具有以下属性：

expires=Wed, 22 May 2024 11:44:43 GMT; path=/; secure; samesite=none; httponly

但是，浏览器永远不会将其存储在 Cookie 中。 “令牌”未在“应用程序”选项卡中 http://localhost:3000 的 Cookie 中列出。

前端创建请求是这样的：

static readonly apiNoAuthInstance = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,      // https://localhost:5001/v1/api/
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json; charset=UTF-8'
  }
});

后端的CORS设置如下：

if (builder.Environment.IsDevelopment())
{
    options.AddPolicy("AllowAllHeaders",
       builder =>
       {
           builder.SetIsOriginAllowed(origin => true)
                  .AllowAnyHeader()
                  .AllowCredentials()
                  .AllowAnyMethod();
       });
}

标题设置如下：

HttpContext.Response.Cookies.Append("token", result.AccessToken,
    new CookieOptions
    {
        Expires = result.ValidTo,
        HttpOnly = true,
        Secure = true,
        IsEssential = true,
        SameSite = SameSiteMode.None
    });

我认为问题与不同的后/前 IP 有关，但认为此配置应该可以解决该问题。 为什么浏览器不设置该 cookie？有办法实现吗？ 据我了解，这在生产中不会成为问题，但我需要能够在本地测试它。

Answer 1

为什么浏览器不设置该 cookie？

答案：请先检查文档。 Cookie 与同源策略

               简单来说，localhost:3000和localhost:5001都使用localhost，但它们分属于两个站点，      a.com和b.com。

如果你想让它起作用，你应该使用

frontend.a.com

和

backend.a.com

，然后他们将共享cookie。

a

表示您的域名。

解决方案

有两种方法可以解决这个问题，最简单的是

SPA

，另一种是部署一个应用程序

using IIS and use a virtual application

实现来打开两个名称为

same domain

的网站。

1.SPA

Here is a detailed steps for Angular, the steps are same, you can check it.

如何在刷新已发布到 IIS 10 的 Angular 应用程序时防止 404 错误

2.虚拟应用

Here is a detailed steps for visual application.

https://stackoverflow.com/a/73974878/7687666