Angular 19中X-XSRF-TOKEN请求头未自动添加问题求助

我在 Angular 19（后端基于 ASP.NET Core 8）的应用中，已在 Core 模块配置应用初始化时从后端获取 XSRF Cookie，初始化的 GET 请求执行正常，响应中已携带 XSRF-TOKEN Cookie，但发起登录等 POST 请求时，Cookie 存在却未自动添加 X-XSRF-TOKEN 请求头，求排查解决。

相关代码 #

前端 CoreModule 配置 #

import { inject, NgModule, provideAppInitializer } from '@angular/core';
import { CommonModule } from '@angular/common';
import { provideHttpClient, withInterceptors, withXsrfConfiguration } from '@angular/common/http';
import { tokenInterceptor } from './interceptors/token.interceptor';
import { AuthenticationService } from './services/authentication.service';

export function appInitilizerCheckTokenValidity(): Promise<void> {
  const authService = inject(AuthenticationService);
  return authService.checkTokenValidity().then(
    _isValid => {},
    () => {}
  );
}

export function appInitilizerGetXsrfToken(): Promise<any> {
  const authService = inject(AuthenticationService);
  return authService.xsrfToken().then(
    _ => {},
    () => {}
  )
}

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  providers: [
    provideAppInitializer(() => appInitilizerCheckTokenValidity()),
    provideAppInitializer(() => appInitilizerGetXsrfToken()),
    provideHttpClient(withXsrfConfiguration({cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN'})),
  ]
})
export class CoreModule { }

前端 AuthenticationService 的 xsrfToken 方法 #

xsrfToken(): Promise<any> {
    let url = `${this.baseXsrfUrl}/xsrf`;
    return firstValueFrom(this.http.get<{elment:any}>(url, {withCredentials: true})));
  }

后端 XSRF 接口代码 #

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace AmazixWeb.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class XsrfController : ControllerBase
    {
        [HttpGet("xsrf")]
        public IActionResult XSRFToken()
        {
            var csrfToken = Guid.NewGuid().ToString();
            Response.Cookies.Append("XSRF-TOKEN", csrfToken, new CookieOptions
            {
                HttpOnly = false,
                SameSite = SameSiteMode.None,
                Secure = true
            });
            return Ok();
        }
    }
}

排查方向与解决方案 #

1. 验证请求是否符合 Angular 自动携带规则 #

Angular HttpClient 仅为同源的非 GET/HEAD/OPTIONS 请求自动添加 XSRF 头：

• 确保 POST 请求开启 withCredentials: true，跨域场景下必须携带 Cookie 才能触发 XSRF 头自动注入；
• 确认请求 URL 与获取 XSRF Cookie 的 URL 同源（协议、域名、端口一致），跨域时需后端配置 CORS 允许携带凭证。

2. 调整 Cookie 的 SameSite 与 Secure 配置 #

后端设置的 SameSite = SameSiteMode.None 必须配合 Secure = true，但本地 HTTP 开发环境下浏览器会拒绝存储此类 Cookie：

• 本地开发时临时改为 SameSite = SameSiteMode.Lax、Secure = false，测试是否正常；
• 生产环境确保使用 HTTPS，保持 SameSite.None 和 Secure=true 的组合。

3. 修正 HttpClient 配置顺序 #

若 tokenInterceptor 拦截器修改了请求配置，可能覆盖 XSRF 头的自动注入，需调整配置顺序让 XSRF 配置优先：

provideHttpClient(
  withXsrfConfiguration({cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN'}),
  withInterceptors([tokenInterceptor])
),

4. 补充 Cookie 的 Path 配置 #

后端未指定 Cookie 的 Path 时，默认路径为当前请求路径（如 /api/Xsrf），若登录请求路径不在此范围内，浏览器不会携带该 Cookie：

Response.Cookies.Append("XSRF-TOKEN", csrfToken, new CookieOptions
{
    HttpOnly = false,
    SameSite = SameSiteMode.None,
    Secure = true,
    Path = "/" // 新增全局路径配置
});

5. 手动注入 XSRF 头（兜底方案） #

若自动机制仍失效，可手动提取并添加头：

• 在 AuthenticationService 中存储令牌：

  private xsrfToken?: string;
  
  xsrfToken(): Promise<any> {
      let url = `${this.baseXsrfUrl}/xsrf`;
      return firstValueFrom(this.http.get<{elment:any}>(url, {withCredentials: true}))
        .then(() => {
          const cookies = document.cookie.split('; ');
          const xsrfCookie = cookies.find(c => c.startsWith('XSRF-TOKEN='));
          if (xsrfCookie) {
            this.xsrfToken = xsrfCookie.split('=')[1];
          }
        });
    }
  

• 在 tokenInterceptor 中添加请求头：

  export const tokenInterceptor: HttpInterceptorFn = (req, next) => {
    const authService = inject(AuthenticationService);
    if (authService.xsrfToken && !req.headers.has('X-XSRF-TOKEN')) {
      req = req.clone({
        headers: req.headers.set('X-XSRF-TOKEN', authService.xsrfToken)
      });
    }
    return next(req);
  };
  

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