Angular Http POST - adding multiple headers

Question

I am struggling to add multiple headers to an angular http POST request. Adding a single header works fine, but anything beyond that results in bad requests. for example

Update(url): Observable<string> {

        let _headers = new Headers();
        _headers.append( 'accept','application/json;odata=verbose')
     
        let options = new RequestOptions({
            withCredentials: true,
            headers: _headers
        })
        let body = '"{ hey ... this is some data }"'
        return this.http.post(url, body, options)
            .map(data => { return data.json() })
    }

the code above generates the request properly. see below (from Fiddler)

POST http://foo.wingtip.com/pwa/_api/contextinfo/ HTTP/1.1
Host: foo.wingtip.com
Connection: keep-alive
Content-Length: 31
accept: application/json;odata=verbose
Origin: 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
content-type: text/plain
Referer: http://localhost:4200/resPlans
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: Ribbon.Tabs.TeamBuilder.Home=1920974|-1|125

"{ hey ... this is some data }"

If i add another header using .append, the generated request is wrong.. and my previous headers are gone as well..for example...

update(url): Observable<string> {

        let _headers = new Headers();
        _headers.append( 'accept','application/json;odata=verbose')
        _headers.append('Content-Length','31')  /////this breaks it
   
        let options = new RequestOptions({
            withCredentials: true,
            headers: _headers
        })
        let body = '"{ hey ... this is some data }"'
        return this.http.post(url, body, options)
            .map(data => { return data.json()})
    }

the resulting request (in Fiddler) looks like so

OPTIONS http://foo.wingtip.com/pwa/_api/contextinfo/ HTTP/1.1
Host: foo.wingtip.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: 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
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:4200/resPlans
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8

note that neither of the two custom headers are present.

and yes... i did import the Http, Header, and RequestOptions from Angular's Http library.

Guidance much appreciated

Possible duplicate of [Angular >= 4.3, httpClient.get params empty](https://stackoverflow.com/questions/45500264/angular-4-3-httpclient-get-params-empty) — Pengyy, Sep 12 '17 at 23:36
true that Content-length is not needed. i added the extra header only to demonstrate that an additional header of any kind breaks the request. — jgoodso2, Sep 13 '17 at 00:41

Dr. X · Answer 1 · 2017-09-13T08:38:03.477

0

Try to add some TOKEN

_header.append('Authorization', 'Bearer ' + TOKEN_VALUE );

If not works please try below full code with SOME_VALID_TOKEN..

    const headers = new Headers({'Content-Type': 'application/json;charset=UTF-8'});
    headers.append('Authorization', 'Bearer ' +  SOME_VALID_TOKEN);
    this._currentHeader = new RequestOptions({headers: headers});

    http.post(path, data, this._currentHeader)

edited Sep 13 '17 at 08:38

answered Sep 12 '17 at 23:14

Dr. X

2,890
2
15
37

Your code does not include TOKEN you have to add this parameter. I change my answer.. – Dr. X Sep 13 '17 at 08:35

score 0 · Answer 2 · answered Sep 13 '17 at 05:18

you can try using some thing like this

 this.options = new RequestOptions({
    headers: new Headers({
      'header1': 'value1',
      // And more
    })
  });

And use this options in the request

If you are using the new HttpClientModule do something like this

const headers = new HttpHeaders()
    .set('header1', "header1")
    .set('header2', "header2");

jgoodso2 · Answer 3 · 2017-09-15T09:52:02.433

My issue was due to CORS. Because of my additional headers and http method (POST), the Angular HttpClient "pre-flighted" my request - turning my POST request into a request with the OPTIONS request method. I originally assumed the request had somehow broken, when in fact it was behaving as it is supposed to.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/

Angular Http POST - adding multiple headers

3 Answers3