Angular2 http get request with header fails

Question

I am trying to do a simple get request via angular2 http like this: (the token is present also retrieved from a post to my api)

let idToken = localStorage.getItem('id_token');
let authHeader = new Headers();
if (idToken) {
    authHeader.append('Authorization', 'Bearer ' + idToken);
}
return this._http.get('http://someapicall-to-my-custom-api', {headers: authHeader})
.map(response => response.json())
.subscribe(
    data => console.log(data),
    error => console.log(JSON.stringify(error)),
    () => console.log('Completed')
);

If i call my api without the headers it returns a good result. The moment i add the header i only runs through the error in subscribe. The problem is that i need to start sending the header with it to get some protected data and so far that is failing.

In the console i see no usefull information at all i just see this:

{"_body":{"isTrusted":true},"status":200,"ok":true,"statusText":"Ok","headers":{},"type":3,"url":null}

On the GET request to the api i see no 200 ok but i do when i didnt add the headers. Also there are no response headers.

If i try to use postman to do the same, it works without problems in that program.

I hope someone can point me into the right direction. Could it be my api? How can i debug this?

Thx for your suggestion but i am not sure how to check that. What's so weird to me is that if i just don't send any headers i get a ok 200 result in the console. Its just if i try to add a header to it it fails and i get the result described in the post. The API im trying to do the http get to is a custom Laravel API with dingo to which i also added a header to allow cross domain for example. — Ahzrael
– Ahzrael, Commented May 12, 2016 at 19:23
It mighr be a CORS issue where custom headers need to be explicitely allowed, but I would expect a proper error message. Do you not control the server? What kind of server is it? — Günter Zöchbauer
– Günter Zöchbauer, Commented May 12, 2016 at 19:25
Well i had a CORS issue before when trying to post to a non protected end point in my API and i added this: header('Access-Control-Allow-Origin: *'); to the Laravel routes file which solved that. So at this point i figured i should not have any issues relating to that anymore. I control both the front end (angular2) and the api backend which is my custom Laravel. — Ahzrael
– Ahzrael, Commented May 12, 2016 at 19:28
Wow you are the best!!! I just added this to my API: header('Access-Control-Allow-Headers: Content-Type, X-Auth-Token, Origin, Authorization'); And it started to work!! THANKS MILLIONS — Ahzrael
– Ahzrael, Commented May 12, 2016 at 19:33

Community · Accepted Answer · 2017-05-23 11:46:49Z

2

You also need

Access-Control-Allow-Headers: Authorization

See also CORS: Autorization is not allowed by Access-Control-Allow-Headers

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered May 12, 2016 at 19:31

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

Ahzrael · Accepted Answer · 2016-05-12 19:36:06Z

1

By adding this to the routes.php in my Laravel API, which was the api i was trying to call it started to work. Thanks for Günter Zöchbauer to give me the idea to add that there :)

header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');

answered May 12, 2016 at 19:36

Ahzrael

1892 silver badges9 bronze badges

Comments

David Dehghan · Accepted Answer · 2017-12-24 10:39:10Z

0

In this happens in the context of electron apps and chrome extensions as well.

The cause is that there is proxy in between you app and your server. (usually an authentication proxy server for intranet domains). This new url will not match the page URL where you app was loaded from or other trusted URLs.

Unfortunately you don't know the domain on your proxy server to add it to your trusted URLs. So there is no way to fix this.

answered Dec 24, 2017 at 10:39

David Dehghan

25.3k11 gold badges113 silver badges101 bronze badges

Collectives™ on Stack Overflow

Angular2 http get request with header fails

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related