Despite thoroughly reading the documentation and searching for answers on various platforms, I am still facing issues with Angular's XSRF mechanism. I cannot seem to get the X-XSRF-TOKEN header automatically appended when making a POST request.
My situation involves an Angular 6 application with a login form.
This app is integrated into a Symfony (PHP 7.1) website. When the Angular page is served from Symfony, it correctly sends the necessary Cookie (XSRF-TOKEN):
https://i.sstatic.net/dXZjD.png
I have ensured that my app.module.ts file includes the relevant modules:
// 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 {
}
However, when making an HTTP request inside a Service method, such as the example below (this.http being an instance of HttpClient):
this.http
.post<any>('api/login', {'_username': username, '_pass': password})
.subscribe(/* handler here */);
The POST request does not include the X-XSRF-TOKEN header. What could be causing this issue?