React前端与.NET后端跨端口开发时如何传递Cookie？

1. 调整.NET Core后端的Cookie配置 #

修改后端Cookie认证的属性，让它支持跨端口访问：
在Program.cs的Cookie认证配置块里，补充这些设置：

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.Cookie.Domain = "localhost"; // 统一域为localhost，适配不同端口
        options.Cookie.SameSite = SameSiteMode.Lax; // 若SSO要求更宽松的跨域，可改为SameSiteMode.None
        options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // 本地开发用HTTPS时必须开启
        options.Cookie.HttpOnly = false; // 仅本地开发临时设置，方便前端JS读取Cookie；生产环境务必改回true
    });

2. 配置后端CORS允许携带凭证 #

让后端明确允许前端端口的跨域请求并支持Cookie传递：
在Program.cs中添加CORS策略并启用：

builder.Services.AddCors(options =>
{
    options.AddPolicy("LocalDevCors", policy =>
    {
        policy.WithOrigins("https://localhost:44496") // 前端的HTTPS地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 核心配置：允许携带Cookie等凭证
    });
});

// 注意把CORS中间件放在路由之前
app.UseCors("LocalDevCors");

3. 前端请求时携带凭证 #

在React的请求代码里，确保开启携带凭证的设置：

• 用axios的情况：

axios.get('https://localhost:44497/api/your-endpoint', { withCredentials: true })

• 用fetch的情况：

fetch('https://localhost:44497/api/your-endpoint', { credentials: 'include' })

4. 用React代理转发请求（可选方案） #

如果不想修改Cookie和CORS配置，可以通过代理让前后端模拟同域：
在React项目的package.json里添加代理配置：

"proxy": "https://localhost:44497"

之后前端请求直接写相对路径（比如/api/your-endpoint），请求会自动转发到后端端口，此时浏览器会认为是同域，Cookie可正常访问。

内容的提问来源于stack exchange，提问作者Maurice Klimek