Angular与Asp.net HttpCookie认证问题：withcredentials=true未传Cookie

我正尝试在Angular中实现HttpOnly Cookies认证，但设置withcredentials="true"后，GET请求仍未向API项目发送Cookie。已在后端响应中添加Cookie，但后续请求仍无法携带该Cookie。

后端认证代码 #

public HttpResponseMessage Authenticate(User user)
{
        var httpResponseMessage = new HttpResponseMessage();

        JWTService _jwtService = new JWTService();
        var authencatedUser = userList.FirstOrDefault(p => p.UserName == user.UserName && p.Password == user.Password);

        if (authencatedUser != null && authencatedUser.Id > 0)
        {
            AuthenticateDto authenticateDto = new AuthenticateDto()
            {
                AccessToken = _jwtService.GenerateAccessToken(authencatedUser, Request.Headers.Referrer != null ? Request.Headers.Referrer.Authority : ConfigurationManager.AppSettings["Audiences"].Split(',').ToList().FirstOrDefault()),
                FirstName = authencatedUser.FirstName,
                Username = authencatedUser.UserName
            };

            HttpCookie cookie = new HttpCookie("XSRF-TOKEN");

            cookie["XSRF-TOKEN"] = authenticateDto.AccessToken;

            cookie.HttpOnly = true;
            cookie.Expires = DateTime.Now.AddDays(1);
            //cookie.Domain = Request.RequestUri.Host;
            cookie.Secure = true;

            httpResponseMessage = Request.CreateResponse(HttpStatusCode.OK, new { status = true, data = authenticateDto, message = "Success" });
            HttpContext.Current.Response.Cookies.Add(cookie);
            return httpResponseMessage;
        }
        else
        {
            return Request.CreateResponse(HttpStatusCode.InternalServerError, new { message = "User not found" });
        }
}

Angular 拦截器代码 #

export class HeaderIterceptor implements HttpInterceptor {

  constructor(private authService : AuthService, private baseService: BaseService,private router : Router
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

debugger
    var userToken = this.baseService.getAccessToken();
    let httpHeaders: HttpHeaders = new HttpHeaders({ 'Authorization': "bearer " + userToken })
      .append('Accept', 'application/json').append('Content-Type', 'application/json')
      .append('Access-Control-Allow-Origin', '*');
      let modifiedReq = request.clone({ 
        headers: httpHeaders,withCredentials: true
      });
     
     return next.handle(modifiedReq);

}

问题排查与解决要点 #

1. Cookie 配置修正 #

• Domain 设置：你注释掉了cookie.Domain，如果前后端是不同端口（比如前端localhost:4200，后端localhost:5000），必须显式设置Domain为根域名（比如localhost），否则浏览器不会跨端口携带Cookie。取消注释并设置正确的Domain。
• Secure 属性：Secure=true要求Cookie仅通过HTTPS传输，本地开发如果用HTTP，浏览器会拒绝保存这个Cookie。开发环境先改成Secure=false，生产环境再改回true。
• Path 属性：默认Cookie的Path是当前请求路径，建议手动设置cookie.Path = "/"，这样全站所有请求都会携带该Cookie。

2. CORS 配置必须到位 #

• 后端CORS必须允许前端的具体Origin（不能用*，因为带Credentials的请求不支持通配符），并且开启AllowCredentials。比如ASP.NET中配置：

  app.UseCors(builder => builder
      .WithOrigins("http://localhost:4200")
      .AllowCredentials()
      .AllowAnyHeader()
      .AllowAnyMethod());
  

• 前端拦截器里不要加Access-Control-Allow-Origin: *，这个响应头应该由后端返回，前端添加会导致冲突。

3. Angular 请求优化 #

• 你现在同时用Header传Authorization和Cookie存Token，二选一即可。如果用HttpOnly Cookie认证，后端直接从Cookie读取Token，前端不需要手动在Header里加Authorization。
• 确认withCredentials在所有需要认证的请求上都生效，拦截器里的配置是对的，但要注意OPTIONS预检请求也会受影响，确保后端正确处理预检。

4. 浏览器调试验证 #

• 打开开发者工具Application标签，查看Cookies列表，确认XSRF-TOKEN已被保存。如果没保存，检查响应头的Set-Cookie是否有错误。
• 查看请求的Request Headers，确认Cookie字段存在且包含XSRF-TOKEN。

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