Adding additional headers to an http request

Question

This is the way I add headers to an http-request in my Angular 4 application:

constructor(private http: Http) {    }

getUsers() {
    const headers = new Headers(
        {
            'Content-Type': 'application/json',
            'Authorization': 'somekey ' + localStorage.getItem('token')
        });
    return this.http.get(environment.apiUrl + 'users/all', {headers: headers})
}

My API works fine when I call it via Postman. And when I check the result of

request.getHeader("Authorization")

it returns back the proper value which is my token.

But when I call the API via frontend application

request.getHeader("Authorization")

returns null. And also creates a header named "access-control-request-headers" with this value: "authorization,content-type". Where is the token I set then? And why this request is not authorized to get the result just like when I call the API using Postman?

what you get with console.log(localStorage.getItem('token')); is it right? — Vega
– Vega, Commented Jul 21, 2017 at 18:27
Sorry, I just saw your comment. Yes, I had the correct value in the localStorage. I solved the problem. Check out the answer bellow. — AliReza
– AliReza, Commented Jul 26, 2017 at 18:59

RKG · Accepted Answer · 2017-07-21 17:45:44Z

2

Try doing this.

private headers: Headers;

constructor(private http: Http) {
  this.headers = new Headers();
  this.headers.append('Content-Type', 'application/json');
  this.headers.append('Authorization', 'somekey ' + localStorage.getItem('token'));
}

public getUsers() {
  const options = new RequestOptions({
    headers: this.headers
  });
  return this.http.get(environment.apiUrl + 'users/all', options)
}

answered Jul 21, 2017 at 17:45

RKG

6121 gold badge9 silver badges24 bronze badges

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

11 Comments

AliReza Over a year ago

Thanks. Tried it. Still have the same problem.

AliReza Over a year ago

This is the "import" I used for the "header" object? import {Http, Headers, Response, RequestOptions} from '@angular/http'

RKG Over a year ago

To rule out possible issues on the server side, can you try your GET call with a rest client like Postman?

RKG Over a year ago

Thats weird. I did not even know there was a different way to send http Headers in Angular2. All the examples I saw has the same exact way of doing it.

RKG Over a year ago

Check this example and thats exactly how its done. jasonwatmore.com/post/2016/08/16/…. Not really sure what's wrong with your setup.

|

AliReza · Accepted Answer · 2017-07-26 13:41:10Z

It was a CORS (Cross-Origin Resource Sharing) problem causing by the browser's mechanism. And I believe it's not a matter of frontend framework.

There are two different types of requests: Simple Requests and Preflighted Requests.

When you add new headers to a request, it won't be counted as a simple request anymore. And Unlike “simple requests”, "preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this, since they may have implications to user data.

Like the simple requests, the browser adds the Origin header to every request, including the preflight. The preflight request is made as an HTTP OPTIONS request. It also contains a few additional headers and "Access-Control-Request-Headers" is one of those additional headers which is a comma-delimited list of non-simple headers that are included in the request. In my case the value of this header is: "authorization,content-type".

So, the request I was inspecting was the preflighted one not the actual-request I was sending to the backend-API.

You may deal with this preflighted request in your own way. Just like avoid filtering and set status 200 when http method is OPTIONS:

if("options".equalsIgnoreCase(request.getMethod())) {
    response.setStatus(HttpServletResponse.SC_OK);
} else {
    chain.doFilter(req, res);
}

Which might not be the best solution but you won't get "Response for preflight has invalid HTTP status code 401".

Please let me know what is your preferred way to deal with this preflighted request

Here are the links I used to shape this answer. They can help you to learn more about CORS:

https://www.html5rocks.com/en/tutorials/cors/

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

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

Response for preflight has invalid HTTP status code 401 - Spring

Collectives™ on Stack Overflow

Adding additional headers to an http request

2 Answers 2

11 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Linked

Related