Angular 6 不会将 X-XSRF-TOKEN header 添加到 http 请求

Question

我读过 the docs以及关于 SO 的所有相关问题，但 Angular 的 XSRF 机制仍然对我不起作用:我绝不能发出自动附加 X-XSRF-TOKEN header 的 POST 请求。

我有一个带有登录表单的 Angular 6 应用程序。

它是 Symfony (PHP 7.1) 网站的一部分，当从 Symfony 提供服务时，Angular 应用页面会发送正确的 Cookie (XSRF-TOKEN):

我的 app.module.ts 包含正确的模块:

// other imports...
import {HttpClientModule, HttpClientXsrfModule} from "@angular/common/http";

// ...
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    NgbModule.forRoot(),
    BrowserModule,
    // ...
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-CSRF-TOKEN'
    }),
    // other imports
  ],
  providers: [],
  entryComponents: [WarningDialog],
  bootstrap: [AppComponent]
})
export class AppModule {
}

然后，在服务的方法中，我发出以下 http 请求(this.http 是 HttpClient 的一个实例):

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

post 请求从不发送 X-XSRF-TOKEN header 。为什么？

Answer 1

问题又是 Angular 糟糕的文档。

事实是，Angular 将添加 X-XSRF-TOKEN header 仅当 XSRF-TOKEN cookie 是在服务器端生成的具有以下选项:

• 路径=/
• httpOnly = false(这很重要，而且完全未记录)

此外，Angular 应用程序和被调用的 URL 必须驻留在同一台服务器上。

引用this Angular Github issue