title: Adding headers via HttpInterceptor Angular 5
body: <p>I want to add headers to post request from Angular 5 web app.
  I've created the following Injectable class, registered in my app module:</p>
  
  <pre><code>@Injectable()
      export class headerInterceptor implements HttpInterceptor {
        intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {    
          // Clone the request to add the new header         
          const authReq = req.clone({
            headers: new HttpHeaders({
              'Content-Type':  'application/json; charset=utf-8',        
            })
          });        
          return next.handle(authReq);
  
  
        }
      }
  </code></pre>
  
  <p>I have network communication service and Im adding body parameters as below.</p>
  
  <pre><code>@Injectable()
  export class NetworkService {
  
    Root:string = 'some valid url';
    results:Object[];
    loading:boolean;
  
    // inject Http client to our client service.
    constructor(private httpClient: HttpClient ) {
  
    }
  
  
  
    login(loginParams : URLSearchParams){    
      let baseURL = `${this.Root}/login`;                    
      this.httpClient.post(baseURL, JSON.stringify({'UserName':'123','Password':'123'} ))
      .subscribe(data =&gt; {
          console.log();
      },
      err =&gt; {
            console.log('Error: ' + err.error);
        });
  </code></pre>
  
  <p>when I put breakpoint after the clone method inside headerInterceptor class I can see the request body. 
  the problem is when I switch to network tab in chrome, I get 405 error and I can't see the body and the new headers. when I return the original request 'req' 
  the body sent ok but no new headers of course.</p>