Angular 6不会将X-XSRF-TOKEN标头添加到http请求中

Question

我已经阅读了the docs和所有与SO有关的问题，但是Angular的XSRF机制仍然无法为我工作：绝对不能通过自动附加X-XSRF-TOKEN标头来发出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 */);
发布请求从不发送X-XSRF-TOKEN标头。为什么？

我已经阅读了文档以及关于SO的所有相关问题，但仍然Angular的XSRF机制对我不起作用：绝对不能通过自动附加X-XSRF-TOKEN标头来发出POST请求... 。

Answer 1

问题再次是Angular的不良文档。

Answer 2

稍微偏离主题，但是对于其他来这里的人，我通过以下方式（对于spring-boot）解决了此问题：>

     /**
     * CORS config - used by cors() in configure() DO NOT CHANGE the METDHO NAME
     * 
     * @return
     */
    @Bean()
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Lists.newArrayList("http://localhost:4200"));
        configuration.setAllowedMethods(Lists.newArrayList("GET", "POST", "OPTIONS"));
        configuration.setAllowCredentials(true);
        configuration.setAllowedHeaders(Lists.newArrayList("x-xsrf-token", "XSRF-TOKEN"));
        configuration.setMaxAge(10l);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

Answer 3

请确保您的服务器在X-CSRF-Token时允许打开browser requests OPTIONS method标头。

实施例：

Answer 4

Angular的MDN Docs从cookie中读取XSRF令牌。这意味着：

如果后端在另一个域上，Angular将无法读取cookie值；