Angular 15 搭配.NET 6 API 实现防伪令牌遇阻求助

核心原因 #

跨端口属于跨域场景，浏览器对跨域Cookie的存储有严格限制，SameSite属性、Domain配置以及CORS凭证权限是关键影响因素。

后端（Startup.cs）配置修正 #

1. 调整防伪令牌Cookie属性
   配置AddAntiforgery时，必须明确Cookie的跨域兼容属性，确保Angular能读取且浏览器允许存储：

   services.AddAntiforgery(options =>
   {
       options.HeaderName = "X-XSRF-TOKEN";
       options.Cookie.Name = "XSRF-TOKEN";
       options.Cookie.SameSite = SameSiteMode.None;
       options.Cookie.SecurePolicy = CookieSecurePolicy.None; // 本地HTTP开发用，生产环境改为Always
       options.Cookie.HttpOnly = false; // 允许前端JS读取
       options.Cookie.Domain = "localhost"; // 跨端口共享域名
   });
   

2. 配置带凭证的CORS策略
   跨域携带Cookie必须开启AllowCredentials，同时指定前端具体Origin：

   services.AddCors(options =>
   {
       options.AddPolicy("AllowFrontend",
           policy => policy.WithOrigins("http://localhost:4200") // 替换为你的Angular端口
                           .AllowAnyHeader()
                           .AllowAnyMethod()
                           .AllowCredentials());
   });
   

   注意将CORS中间件放在UseRouting之后、UseAuthorization之前：

   app.UseCors("AllowFrontend");
   

3. 规范Cookie生成时机
   建议在前端首次GET请求（如初始化接口）中生成并返回令牌，避免无意义的中间件硬写：

   app.Use(async (context, next) =>
   {
       if (context.Request.Path == "/api/init") // 前端首次请求的接口路径
       {
           var antiforgery = context.RequestServices.GetRequiredService<IAntiforgery>();
           var tokens = antiforgery.GetAndStoreTokens(context);
           context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken,
               new CookieOptions
               {
                   HttpOnly = false,
                   SameSite = SameSiteMode.None,
                   Secure = false,
                   Domain = "localhost"
               });
       }
       await next();
   });
   

前端（app.module.ts）配置确认 #

确保HttpClientXsrfModule配置与后端完全匹配，发起请求时启用凭证：

import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-XSRF-TOKEN'
    })
  ]
})
export class AppModule { }

请求时显式声明带凭证（Angular默认支持，但显式设置更稳妥）：

this.http.post('/api/target', requestData, { withCredentials: true }).subscribe(...);

浏览器验证步骤 #

1. 打开开发者工具Application标签，检查Cookie的SameSite、Secure、Domain属性是否符合配置
2. 查看网络请求的Response Headers中Set-Cookie字段，确认属性正确
3. 本地HTTP开发时，若Chrome阻止SameSite=NoneCookie，可临时在chrome://flags/#same-site-by-default-cookies中设置为Disabled

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