Angular 6 not sending headers on POST request

Question

For some reason angular is not sending the Authorization headers for POST requests

// DOES NOT SEND HTTP HEADERS
let request = this.http.post(root + '/api/lands/favourites', {
  headers: new HttpHeaders({
    'Authorization': 'Bearer mytoken',
    'Accept': 'application/json'
  })
});
request.subscribe();

If I change the HTTP verb, it works perfectly

let request = this.http.delete(root + '/api/lands/favourites/'+landId, {
  headers: {
    'Authorization': 'Bearer myToken',
    'Accept': 'application/json'
  }
});
request.subscribe();

I can see the pre-flight request working, the second request however lacks the authorization headers, so it fails to authenticate returning a 401.

I cant find any information on why angular does this.

CORS pre-flight request:

OPTIONS /api/lands/favourites HTTP/1.1
Host: api.tierras.landium.test.com.ar
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://tierras.landium.test.com.ar
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9

CORS pre-flight response:

HTTP/1.0 200 OK
Date: Mon, 13 Aug 2018 20:29:06 GMT
Server: Apache/2.4.33 (Win32) OpenSSL/1.1.0h PHP/7.2.5
X-Powered-By: PHP/7.2.5
Cache-Control: no-cache, private
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://tierras.landium.test.com.ar
Access-Control-Max-Age: 50000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: accept, accept-language, content-language, content-type, authorization, accept-encoding, cache-control, connection, pragma
Content-Length: 0
Connection: close
Content-Type: text/html; charset=UTF-8

Actual POST request that follows

POST /api/lands/favourites HTTP/1.1
Host: api.tierras.landium.test.com.ar
Connection: keep-alive
Content-Length: 52
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: http://tierras.landium.test.com.ar
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Content-Type: application/json
Referer: http://tierras.landium.test.com.ar/land/5
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9

Response from the server

HTTP/1.1 401 Unauthorized
Date: Mon, 13 Aug 2018 20:29:06 GMT
Server: Apache/2.4.33 (Win32) OpenSSL/1.1.0h PHP/7.2.5
X-Powered-By: PHP/7.2.5
Cache-Control: no-cache, private
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 57
Access-Control-Allow-Origin: http://tierras.landium.test.com.ar
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: *
Content-Length: 30
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: application/json

Does the preflight include Access-Control-Allow-Credentials: true? — Tobias K.
– Tobias K., Commented Aug 13, 2018 at 19:59

KazimC · Accepted Answer · 2018-08-13 20:04:07Z

6

If you send a post, i think you shoud add body with post.

// DOES NOT SEND HTTP HEADERS
let request = this.http.post(root + '/api/lands/favourites', {BODY}, {
   headers: new HttpHeaders({
   'Authorization': 'Bearer mytoken',
   'Accept': 'application/json'
 })
});
request.subscribe();

atleast empty {}

answered Aug 13, 2018 at 20:04

KazimC

1647 bronze badges

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

5 Comments

Joaquin Brandan Over a year ago

I removed it for simplicity, it makes no difference if a body is present or not (i tested it)

KazimC Over a year ago

Could you add a photo fully scrolled console preview

Joaquin Brandan Over a year ago

i just posted the headers for all the 4 requests, does that help?

KazimC Over a year ago

Your code absolutely looks good. But post rules says, you should send 3 parameters. Url, body and then headers. This code send your headers in second parameter. I couldn't have any another explanation about it.

Joaquin Brandan Over a year ago

You are right.I messed up the parameters order. That last comment made it obvious, thanks!

Collectives™ on Stack Overflow

Angular 6 not sending headers on POST request

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related