Angular应用通过ASP.NET Web API设置Cookie失败问题求助

1. 调整Identity Cookie的SameSite与安全属性 #

浏览器拦截Cookie的核心原因是跨域非顶级导航场景下，SameSite=Lax不满足Cookie设置要求。需针对Cookie的SameSite属性、安全传输规则做调整：

在Program.cs中配置Application Cookie：

builder.Services.ConfigureApplicationCookie(options =>
{
    options.LoginPath = "/Account/Login";
    options.ExpireTimeSpan = TimeSpan.FromDays(7);
    
    // 核心配置
    options.Cookie.SameSite = SameSiteMode.None;
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // SameSite=None必须配合HTTPS传输
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true; // 标记为必要Cookie，不受浏览器隐私策略限制
});

如果是开发环境（使用HTTP而非HTTPS），浏览器会拒绝SameSite=None且Secure的Cookie，可根据环境动态切换配置：

builder.Services.ConfigureApplicationCookie(options =>
{
    options.LoginPath = "/Account/Login";
    options.ExpireTimeSpan = TimeSpan.FromDays(7);
    
    if (builder.Environment.IsDevelopment())
    {
        options.Cookie.SameSite = SameSiteMode.Lax;
        options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest; // 跟随请求的Scheme
    }
    else
    {
        options.Cookie.SameSite = SameSiteMode.None;
        options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
    }
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});

2. 配置正确的CORS策略 #

跨域请求携带Cookie需同时满足前端和后端的配置要求：

Web API侧CORS配置 #

在Program.cs中添加CORS策略，注意必须指定具体Origin，不能用*（*与允许凭据冲突）：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularApp", policy =>
    {
        // 替换为你的Angular应用地址，例如https://localhost:4200
        policy.WithOrigins("https://localhost:4200")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 允许携带Cookie等凭据
    });
});

// 中间件顺序关键：CORS必须放在Authentication和Authorization之前
app.UseCors("AllowAngularApp");
app.UseAuthentication();
app.UseAuthorization();

Angular侧请求配置 #

调用登录接口时，开启凭据携带：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

login(credentials: { username: string; password: string }) {
    return this.http.post('/api/Account/Login', credentials, {
        withCredentials: true // 携带Cookie
    });
}

3. 统一请求Scheme（HTTP/HTTPS） #

浏览器提示中提到URL has different scheme than the current site，说明Angular应用与Web API的HTTP/HTTPS不一致。开发环境建议统一使用HTTPS：

• Angular：修改angular.json的serve配置，启用HTTPS
• Web API：在launchSettings.json中设置applicationUrl为HTTPS地址

若必须使用HTTP开发，需保证Cookie的SecurePolicy设为SameSiteMode.Lax，同时CORS配置正确。

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