Angular 5 - Can't set header for HttpClient

Question

I am trying to make a POST call using HttpClient in an Angular 5 project, and I want to set the header:

import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { AuthData }    from './models/auth-data';

@Injectable()
export class AuthService {

    constructor(private http: HttpClient) { }

    auth = (data: AuthData) => {

        var url = "https://.../login";
        var payload = data;
        var headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');
        var options =  {
            headers: headers
        };

        this.http.post(url, payload, options).subscribe();
    }
}

For some reason, the Content-Type header does not seem to be in the request I am making.

Why is this?

Is you request even firing? Have you checked with logs or debug if your headers get set before the request fires? Anyways you should be supposed to return an Observable not a Subscription. — AndreaM16
– AndreaM16, Commented Nov 17, 2017 at 16:10
Content-Type doesn't change, what does change mean, change from what to what? :) — AVJT82
– AVJT82, Commented Nov 17, 2017 at 16:50
can you specify, what exactly does it mean that 'header does not seem to be in request'? says who? devtools in browser? or server endpoint? or? — tlt
– tlt, Commented Nov 17, 2017 at 20:06
Yes, the developer tools. I have updated the question with a sample. — Enrique Moreno Tent
– Enrique Moreno Tent, Commented Nov 17, 2017 at 20:11
there should be 2 'requests in question'. http method for one should be OPTIONS (the one you showed here, its called preflight cors request) and one actual POST (if server allows it for your client). you might benefit from reading about cors. if host is different than locahost:4200, which i assume is, then you have to enable cors requests on your server for localhost:4200 client. — tlt
– tlt, Commented Nov 17, 2017 at 21:02

Ronald Dsouza · Accepted Answer · 2018-05-13 10:53:06Z

9

This worked for me. Instead of append.

let headers = new HttpHeaders({
'Content-Type': 'application/json'
});

edited May 13, 2018 at 10:53

answered May 13, 2018 at 8:52

Ronald Dsouza

4104 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dimson d · Accepted Answer · 2018-03-01 18:54:43Z

6

because HttpHeaders is immutable we have to assign it

const _headers = new HttpHeaders();
const headers = _headers.append('Content-Type', 'application/json')
                        .append('...', '...')
                        .append('...', '...');

answered Mar 1, 2018 at 18:54

dimson d

1,6591 gold badge14 silver badges15 bronze badges

1 Comment

Kevin Over a year ago

this is the best answer

tlt · Accepted Answer · 2017-11-18 06:22:17Z

5

If i see correctly, what you're showing us is OPTIONS preflight request (CORS), not actual POST request.

There should be 2 'requests in question'. http method for one should be OPTIONS (the one you showed here, its called preflight cors request) and one actual POST (if server allows it for your client). If host is different than locahost:4200, which i assume is, then you have to enable cors requests on your server for localhost:4200 client.

answered Nov 18, 2017 at 6:22

tlt

15.5k11 gold badges54 silver badges104 bronze badges

1 Comment

Jamil Alisgenderov Over a year ago

What if it is set for 'Access-Control-Allow-Origin' : '*', but still gets preflight request ?

Sunny Gohil · Accepted Answer · 2017-11-17 17:38:13Z

-1

Try this:

var headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');

answered Nov 17, 2017 at 17:38

Sunny Gohil

3191 silver badge11 bronze badges

2 Comments

glitchbane Over a year ago

One reason this won't work is that headers is immutable. You need to assign the result of the append method (which makes a clone of the headers) back to the headers: headers = headers.append(blah)

Kxng Kombian Over a year ago

headers = headers.append('Content-Type', 'application/json');

andrea06590 · Accepted Answer · 2017-11-18 15:17:56Z

-1

Try this too I had the same issue ;)

ng build --production -host=yourDomain.com

The thing is that the project is built on localhost, using node, and keep these default host and port info, you can change it when you are building your project

answered Nov 18, 2017 at 15:17

andrea06590

1,3093 gold badges11 silver badges23 bronze badges

Comments

Suraj Rao · Accepted Answer · 2018-08-30 12:23:23Z

-3

const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json',
          'id':id
        })
      };

note: please send the 'id' as 'String', observe the below modification

 const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json',
          'id':id+''
        })
      };

it's working fine.

edited Aug 30, 2018 at 12:23

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Aug 30, 2018 at 9:18

durga prasad egupati.

1

Collectives™ on Stack Overflow

Angular 5 - Can't set header for HttpClient

6 Answers 6

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Related