title: Angular 4 : Send custom headers with http requests
body: <p>In Angular 4, I am unable to send custom header with http requests.</p>
  
  <p>I have tried to send header using following code:</p>
  
  <pre><code>let response = this.http.post(environment.serverUrl + url, data, this.getHeaders())
        .map((response: Response) =&gt; response.json())
        .catch(this.handleError);
  
  private getHeaders(): RequestOptions {
      let reqOp = new RequestOptions();
  
      let headers = new Headers();
      headers.append('Accept', 'application/json');
      headers.append('Access-Control-Allow-Origin', '*');
      headers.append('Access-Control-Allow-Headers', '*');
  
      reqOp.headers = headers;
  
      return reqOp;
    }
  </code></pre>
  
  <p>Still the headers are not appending to my request header. If I inspect the call in "Network" of Chrome then I am not able to see the custom headers.</p>
  
  <pre><code>Accept:*/*
  Accept-Encoding:gzip, deflate
  Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
  Access-Control-Request-Headers:access-control-allow-headers,access-control-allow-origin,content-type
  Access-Control-Request-Method:POST
  Connection:keep-alive
  Host:10.xxx.xxx.xxx:3300
  Origin:http://localhost:4200
  Referer:http://localhost:4200/
  User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
  </code></pre>
  
  <p>Any help to resolve this? Please note I am not using HttpClient from '@angular/common/http';</p>