Angular 6不向http请求添加X-XSRF-TOKEN头

Question

我已经阅读了文档和所有相关的问题，但是Angular的XSRF机制对我来说仍然不起作用：我无法用自动附加的X-XSRF-TOKEN头发出POST请求。

我有一个角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头。为什么？

Answer 1

稍微偏离了主题，但是对于其他来到这里的人来说，我在后端通过以下方式解决了这个问题（对于sping-start）

     /**
     * 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 2

在我的团队中，问题是我们使用的是绝对路径而不是相对路径。

因此，不要使用以下绝对路径：

this.http.post<any>("https://example.com/api/endpoint",data)

使用

this.http.post<any>("api/endpoint",data)

或者使用

this.http.post<any>("//example.com/api/endpoint",data)

这是因为HttpClientXsrfModule上的角度代码显式忽略绝对路径（请参阅）

Answer 3

问题再次在于Angular的糟糕文档。

事实是，Angular将添加X-XSRF-TOKEN头，只有当XSRF-TOKENcookie是在服务器端生成的，并且具有以下选项：

• 路径=/
• httpOnly=false（这非常重要，而且完全没有文档记录）

此外，Angular应用程序和被调用的URL必须位于同一服务器上。

参考：这个Angular Github问题