.NET6与Angular13生产环境跨域请求Cookie未正常设置问题

基于.NET 6开发的Web API托管在Heroku平台，配套使用PostgreSQL数据库；基于Angular 13开发的前端项目托管在Firebase平台。已完成CORS策略配置，localhost本地环境（不同端口）下CORS问题排查完成后Cookie可正常写入，但生产环境始终无法成功设置Cookie，可在Angular应用中确认已接收到SET-COOKIE响应头。

现有配置 #

后端CORS策略配置 #

// CorsConfig:WebUrl returns the URL of my angular app.
builder.Services.AddCors(x => {
    x.AddPolicy("WebPolicy", opt => {
        opt.WithOrigins(builder.Configuration.GetSection("CorsConfig:WebUrl").Value)
            .AllowAnyHeader()
                .AllowAnyMethod()
                    .AllowCredentials();
    });
});

var app = builder.Build();
app.UseRouting();
app.UseHttpsRedirection();

app.UseCors("WebPolicy");

Cookie设置方式 #

HttpContext.Response.Cookies.Append("d_a", a, new CookieOptions() { Secure = true, SameSite = SameSiteMode.None });
HttpContext.Response.Cookies.Append("d_r", r, new CookieOptions() { Secure = true, SameSite = SameSiteMode.None, HttpOnly = true });

Angular端登录请求实现 #

signIn(user : any) : Observable<any> {
    return this.httpClient.post(this.apiUrl + "login", user, withBodyHttpOptions);

export const withBodyHttpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'}),
    withCredentials: true
}
  }

按优先级排查以下问题：

• CORS响应头实际值不符合跨域带凭证请求要求
  带withCredentials: true的跨域请求，浏览器强制执行严格校验，仅看后端代码逻辑不代表实际响应头正确，先打开浏览器开发者工具Network面板，查看登录接口的响应头：
  1. Access-Control-Allow-Origin不能为通配符*，必须和请求头里的Origin值完全匹配，包括协议、域名、端口，末尾不能多带斜杠。生产环境最常见的问题是配置文件里的前端地址写错（比如漏了https、多了尾斜杠、域名拼写错误），导致CORS头匹配异常，浏览器虽然拿到SET-COOKIE头，但会拒绝存储Cookie。
  2. 响应头必须包含Access-Control-Allow-Credentials: true，缺失该头时浏览器会直接忽略SET-COOKIE指令。
• 未配置Heroku反向代理的转发头信任规则
  Heroku在边缘负载均衡层终止HTTPS连接，再以HTTP协议将请求转发到后端.NET应用，.NET默认不信任未知代理的转发头，会误判当前请求为HTTP请求，触发内置的Cookie安全策略，自动改写SameSite或Secure属性，导致Cookie被浏览器拦截。
  修复方式：在构建WebApplication实例前添加转发头配置，信任Heroku代理：

  builder.Services.Configure<ForwardedHeadersOptions>(options =>
  {
      options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
      options.KnownNetworks.Clear();
      options.KnownProxies.Clear();
  });
  

  然后在中间件管道最靠前的位置（放在app.UseHttpsRedirection()之前）添加转发头中间件：

  app.UseForwardedHeaders();
  

• Cookie属性配置问题
  1. 当前代码未显式指定Cookie的Path属性，默认值为请求路径，若登录接口路径不是根路径，可能导致Cookie仅在登录接口路径下生效，其他路径无法读取。建议显式添加Path = "/"配置。
  2. 若之前测试时写入过同Key但Domain、Path属性不一致的旧Cookie，会导致新Cookie写入失败，先清除浏览器中后端域名、前端域名下的所有相关Cookie再测试。
  3. 不要手动将Cookie的Domain设置为前端Firebase域名，跨域场景下Cookie必须归属后端服务自身的域名，设置为前端域名会直接被浏览器拦截。
• 浏览器第三方Cookie拦截策略触发
  当前前后端部署在完全不同的根域名下（Firebase、Heroku各为独立根域名），后端写入的Cookie属于第三方Cookie，新版Chrome、Edge、Firefox默认开启第三方Cookie拦截，无痕模式下拦截规则更严格，会直接拒绝这类Cookie写入。
  该问题的最优解决方案是为前后端配置同一根域名下的二级域名（例如前端为app.yourdomain.com，后端为api.yourdomain.com），将Cookie的Domain设置为根域名yourdomain.com，SameSite调整为Lax，即可规避第三方Cookie拦截规则。

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