Angular 4.3 HttpClient doesn't send Authorization header

Question

I attempted to send a request with an authorization header using Angular's HttpClient but the header was not set successfully.

Here my code.

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


constructor(private http: HttpClient,
            private auth: AuthService) {
}

sendRequest() {
  this.http.get(this.url, {
    headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.auth.getAccessToken())
  }).subscribe(
    data => {
      console.log(data);
    },
    error => {
      console.log(error);
    }
  );
}

And here the network debug header source.

OPTIONS /userinfo HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: http://localhost:4200/user
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.8,en;q=0.6

The response header is as follows.

HTTP/1.1 400 Bad Request
Access-Control-Allow-Origin: *
Content-Type: text/plain; charset=utf-8
X-Content-Type-Options: nosniff
Date: Sun, 27 Aug 2017 23:45:15 GMT
Content-Length: 18

Is there something wrong?

I understood that I do not understand CORS at all. I will study and start replying. Thank you for your advice. — dchiba
– dchiba, Commented Aug 28, 2017 at 1:41

GreyBeardedGeek · Accepted Answer · 2017-08-27 04:24:38Z

14

If you look at the headers that you included in your question, you will see that this was an OPTIONS request. That indicates that you were attempting to make a cross-site request, and that the browser's CORS (Cross-Origin Resource Sharing) protocol kicked in.

You apparently made a GET request with credentials against a domain (or port number) that was different from the origin of the page making the request. And indeed, we see from your headers that the origin was port 4200 (the standard port for the angular dev server), and that the request was made to port 8080 (probably a java back-end?).

Standard CORS protocol is for the browser to do a "preflight" check, by sending the OPTIONS request to see if an Access-Control-Allow-Origin header comes back stating that the origin is allowed to access the destination.

If the header comes back ok, then the browser will make the GET request. If not, you will get a 401 response.

All of this is done by the browser, and is out of your control.

The spec (https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0) says that when the browser sends the OPTIONS request as part of the preflight, it must not include your authorization header - that will only be sent on the GET.

So, no - nothing is wrong here - it is working as expected.

Now, if after this, you get a 401 and the GET is never sent, then you'll have to modify the server to send the proper Access-Control-Allow-Origin header in response to the OPTIONS request.

For more info CORS, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

answered Aug 27, 2017 at 4:24

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

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

2 Comments

dchiba Over a year ago

Sorry for the leaked information. The server side also implements on its own, and the "Access-Control-Allow-Origin" header is returned with "*". The response header is added to the question text.

dchiba Over a year ago

I understood that I do not understand CORS at all. I will study and start replying. Thank you for your advice.

Collectives™ on Stack Overflow

Angular 4.3 HttpClient doesn't send Authorization header

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related