3

In Angular 4, I am unable to send custom header with http requests.

I have tried to send header using following code:

let response = this.http.post(environment.serverUrl + url, data, this.getHeaders())
      .map((response: Response) => 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;
  }

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.

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

Any help to resolve this? Please note I am not using HttpClient from '@angular/common/http';

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Suvonkar
  • 2,440
  • 12
  • 34
  • 44
  • Possible duplicate of [Angular \[4.3\] Httpclient doesn't send header](https://stackoverflow.com/questions/45286764/angular-4-3-httpclient-doesnt-send-header) – Jota.Toledo Aug 31 '17 at 10:22
  • Remove the `headers.append('Access-Control-Allow-Origin', '*'); headers.append('Access-Control-Allow-Headers', '*')` from your frontend request. Those are strictly just *response* headers for servers to send back in response to requests. The only effect that adding them to a request will have is to trigger the browser to automatically on its own do a CORS preflight OPTIONS request before sending the POST request from your code. For more details, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests. – sideshowbarker Aug 31 '17 at 21:37
  • The headers list you got from the devtools Network pane are headers for a preflight OPTIONS request. The custom headers you added to the request aren’t there because the entire purpose of the preflight is to first contact the server you’re trying to send the request to & ask that server if it opts into getting cross-origin requests that include those headers. If the server’s configured to allow those headers, it’ll send a response that tells the browser it’s OK & only then will the browser send the POST. But if the server says it’s not OK, the preflight fails & the browser never tries the POST – sideshowbarker Aug 31 '17 at 21:45

1 Answers1

0

Do like this. If want more headers just add it to the array of header.

apiUrl = 'api/url'
myFunction(data) {
  let headers = new Headers({'Content-Type':'application/json'});
  let options = new RequestOptions({headers: headers});

  return this.http.post(this.apiUrl, JSON.stringify(data), options).map((response: Response) => {
    return response.json()
  })
}
Suhel
  • 927
  • 8
  • 19
  • 1
    Still no luck. One observation in Chrome custom header is adding in "Access-Control-Request-Headers : access-control-allow-origin,content-type" – Suvonkar Aug 31 '17 at 10:03
  • try installing "Allow-control-Allow-Origin:*" from the chrome extension. also do you already configure the CORS in your server ? – nescafe Mar 16 '18 at 08:16