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

看起来你已经做了不少基础配置，但还是遇到了头没自动加上的问题，我来帮你梳理几个最可能的原因和排查方向：

1. 先确认请求是否是同源请求 #

Angular的HttpClientXsrfModule默认只对同源请求自动添加XSRF头（同源指协议、域名、端口完全一致）。如果你的api/login接口是跨域的（比如Angular在localhost:4200，Symfony在localhost:8000），那Angular不会自动触发XSRF头的添加逻辑。

排查方法：打开浏览器开发者工具的Network面板，查看POST请求的URL和Angular应用的URL是否完全一致。如果是跨域的话，你需要做两件事：

• 在Angular的请求中添加withCredentials: true，确保浏览器携带Cookie：

  this.http.post<any>('api/login', {'_username': username, '_pass': password}, {withCredentials: true})
    .subscribe(/* handler here */);
  

• 同时在Symfony端配置CORS，允许携带凭证：设置Access-Control-Allow-Credentials: true，并且Access-Control-Allow-Origin不能用*，必须指定Angular的具体域名。

如果跨域场景下自动机制还是不生效，你可以手动写一个HTTP拦截器来读取Cookie并添加头，代码示例如下：

// xsrf.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class XsrfInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 从Cookie中提取XSRF-TOKEN
    const xsrfToken = document.cookie.split(';')
      .find(cookie => cookie.trim().startsWith('XSRF-TOKEN='))
      ?.split('=')[1];
    
    if (xsrfToken) {
      request = request.clone({
        setHeaders: {
          'X-CSRF-TOKEN': xsrfToken // 对应你配置的headerName
        }
      });
    }
    return next.handle(request);
  }
}

然后在AppModule的providers中注册拦截器：

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: XsrfInterceptor, multi: true }
]

2. 检查XSRF-TOKEN Cookie的路径和域 #

即使Cookie存在，如果它的路径或域和你的请求不匹配，浏览器也不会把它发送给Angular，导致Angular无法读取到Cookie来生成请求头。

排查方法：打开浏览器开发者工具的Application面板，找到Cookies选项，查看XSRF-TOKEN的：

• Path：应该设置为/（这样所有路径的请求都能拿到），如果是特定路径（比如/symfony），而你的请求路径是/api/login，就会匹配不上。
• Domain：必须和Angular应用的域名一致，不能设置为其他子域名（除非是父域名且符合Cookie域规则）。

你可以在Symfony端调整Cookie的路径配置，确保它覆盖Angular请求的所有路径。

3. 确认Cookie名称和Angular配置完全一致 #

你在HttpClientXsrfModule中配置的cookieName: 'XSRF-TOKEN'必须和Symfony发送的Cookie名称完全一致（包括大小写）。比如如果Symfony发送的是小写的xsrf-token，那Angular就找不到这个Cookie。

排查方法：在Application面板的Cookies里直接查看Cookie的名称，确保和配置的字符串完全匹配。

4. 检查是否有自定义拦截器干扰请求头 #

如果你的应用中还有其他HTTP拦截器，可能会在处理请求时意外移除或覆盖了XSRF头。比如有些拦截器会重新构建请求对象，但没有保留原有的头信息。

排查方法：暂时禁用其他自定义拦截器，测试请求是否能正常带上XSRF头，如果可以，再逐一排查拦截器的代码，确保在克隆请求时保留所有原有头。

5. 验证Angular是否能读取到Cookie #

你可以在发起请求的服务中，手动尝试读取Cookie，确认Angular能拿到XSRF-TOKEN的值：

const token = document.cookie.split(';').find(c => c.trim().startsWith('XSRF-TOKEN='))?.split('=')[1];
console.log('XSRF Token:', token);

如果打印出undefined，说明浏览器没有把Cookie发送给Angular，回到前面的路径/域/同源问题排查；如果能拿到值，那就是Angular的自动XSRF机制没有触发，这时候用手动拦截器的方案就能解决。

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