title: Angular 9: Unable to change or modify HTTP headers
body: <p>My API server runs on Lumen framework and I have a CORS middleware installed there, accompanied with a middleware which manages JSON POST data. On the server side, everything is perfect.</p>
  
  <p>Now, for the UI, I use Angular 9 with Material layout. I have a pretty simple <strong>login</strong> component: it basically validates the input and then calls a service <strong>AuthService</strong> which communicates with my API server.</p>
  
  <p>AuthService is pretty straightforward:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Router } from '@angular/router';
  import { BehaviorSubject, Observable, throwError } from 'rxjs';
  import { catchError, map } from 'rxjs/operators';
  import { HttpClient, HttpHeaders, HttpErrorResponse, HttpParams } from '@angular/common/http';
  
  export interface Token {
    token: string;
    token_type: string;
    expires_in: number;
  }
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService {
    public isAuthenticated = new BehaviorSubject&lt;boolean&gt;(false);
  
    constructor(
      private http: HttpClient,
      private router: Router
    ) {}
  
    async checkAuthenticated() {
      const authToken = localStorage.getItem('access_token');
      return (authToken !== null);
    }
  
    getToken() {
      return localStorage.getItem('access_token');
    }
  
    async login(username: string, password: string) {
      const api = 'http://api.elektron.test/v1/login';
      const headers = new HttpHeaders({'Content-Type': 'application/json; charset=UTF-8'});
  
      const body = JSON.stringify({
        email: username,
        password
      });
  
      // tslint:disable-next-line:max-line-length
      return this.http.post(api, body)
        .subscribe((res: any) =&gt; {
          if(res.token) {
            this.isAuthenticated.next(true);
            localStorage.setItem('access_token', res.token);
          }
        }, error =&gt; {
          console.error(error);
        }, () =&gt; {
          console.log('etstamente');
        });
    }
  
    async logout(redirect: string) {
      const removeToken = localStorage.removeItem('access_token');
  
      if (removeToken == null) {
        this.isAuthenticated.next(false);
        this.router.navigate([redirect]);
      }
    }
  
    handleError(error: HttpErrorResponse) {
      let msg = '';
      if (error.error instanceof ErrorEvent) {
        // client-side error
        msg = error.error.message;
      } else {
        // server-side error
        msg = `Error Code: ${error.status}\nMessage: ${error.message}`;
      }
      return throwError(msg);
    }
  }
  </code></pre>
  
  <p>There in the <code>this.http.post</code> I can pass additional headers in the third argument, and I've tried that already, but I face the problem that whatever header I pass into it, and when I call that request, the <code>Content-Type</code> is never sent.</p>
  
  <p>Another idea I tried was with an interceptor:</p>
  
  <pre><code>import {HttpInterceptor, HttpRequest, HttpHandler, HttpHeaders} from '@angular/common/http';
  import { AuthService } from './auth.service';
  
  @Injectable()
  
  export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService) { }
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) {
      const token = this.authService.getToken();
  
      req = req.clone({
        responseType: 'json'
      });
  
      if (token) {
        req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
      }
  
      if (!req.headers.has('Content-Type')) {
        req = req.clone({
          setHeaders: {
            'Content-Type': 'application/json',
          }
        });
      }
  
      // setting the accept header
      req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
  
      return next.handle(req);
    }
  }
  </code></pre>
  
  <p>When it reaches any of the <code>req.clone</code> statements there, I end up having behavior same as explained before for the <code>POST</code> request.</p>
  
  <p>So, I am clueless what I'm doing wrong here or what's causing this. In the Chrome browser, in the Console under Network tab when I try to see request headers, when these cases from above are applied, it states <strong>Provisional headers are shown</strong> - and I've found some Stack Overflow answers on that issue, but none of them solved my issue.</p>
  
  <p>I've spent last 5-6 hours searching the net for a solution, tried some of my ideas, all to no avail.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> This problem is not related to Angular, but to the server and backend configuration and handling <strong>preflight requests</strong>.</p>