Angular 6 не добавляет заголовок X-XSRF-TOKEN в запрос http - PullRequest
Новая
       54

Angular 6 не добавляет заголовок X-XSRF-TOKEN в запрос http

0 голосов
/ 24 мая 2018

Я прочитал документы и все вопросы, связанные с SO, но механизм Angular XSRF у меня не работает: я никак не могу сделать запрос POST с X-XSRF-Заголовок TOKEN добавляется автоматически.

У меня есть приложение Angular 6 с формой для входа.

Это часть веб-сайта Symfony (PHP 7.1), и страница приложения Angular, когда она обслуживается Symfony, отправляет правильный Cookie (XSRF-TOKEN):

enter image description here

Мой 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.Почему?

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Еще раз проблема в плохой документации Angular.

Дело в том, что Angular добавит заголовок X-XSRF-TOKEN только в том случае, если cookie XSRF-TOKEN был создан на стороне сервера сследующие опции:

  • Path = /
  • httpOnly = false (это очень важно и полностью недокументировано )

Кроме того, приложение Angular и вызываемый URL-адрес должны находиться на одном сервере.

Ссылка: эта проблема Angular Github

0 голосов
/ 10 февраля 2019

Немного не по теме, но для тех, кто сюда заходит, я решил эту проблему в бэкэнде следующим образом (для 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;
    }
0 голосов
/ 24 мая 2018

Убедитесь, что ваш сервер разрешает X-CSRF-Token заголовки при запросе браузера OPTIONS метод .

Пример: 

Access-Control-Allow-Headers: X-CSRF-Token, Content-Type

Ссылка: Документы MDN

...