Angular 2 http not setting header

Question

I'm setting my header and http call like this:

 var headers = new Headers();
headers.set('Authorization','Bearer xxxxxxxxxxx'); 

this.http.get('http://localhost:8080/outputEndpoints', {
  headers: headers
}).
map(res => res.text())

.subscribe(
  data=> console.log(data),
  error=> console.log("Getting Error") 
);

With this I'm expected the header to be:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:es,ca;q=0.8,en-GB;q=0.6,en;q=0.4,fr;q=0.2
Access-Control-Request-Headers:authorization, content-type
Authorization: "Bearer xxxxxxxxxxxx"
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:3000
 Referer:http://localhost:3000/
 User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36    (KHTML,    like Gecko) Chrome/56.0.2924.87 Safari/537.36

Instead I'm getting the following (no Authorization with the token):

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:es,ca;q=0.8,en-GB;q=0.6,en;q=0.4,fr;q=0.2
Access-Control-Request-Headers:authorization, content-type
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36   (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

EDIT:

The general info is:

Request URL:http://localhost:8080/outputEndpoints
Request Method:OPTIONS
Status Code:401 
Remote Address:[::1]:8080

So the OPTIONS call is failing. In other apps, once the OPTIONS call is accepted it makes the GET request in where you can find the Authentication token setted. That means that for some reason the OPTION call it's not being accepted.

When making calls with CURL or SOAP UI it works fine so I presume that it's not a problem with CORS. I'am right?

Any idea or guide would be really helpful.

did you find the solution? same problem here

stackdave
– stackdave

2017-06-21 12:25:52 +00:00
Commented Jun 21, 2017 at 12:25 — stackdave
– stackdave, Commented Jun 21, 2017 at 12:25

Jorawar Singh · Accepted Answer · 2017-02-08 17:39:55Z

1

I think it is headers.append and not headers.set. Try to change your method and see if it works.

answered Feb 8, 2017 at 17:39

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

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

1 Comment

ZanattMan Over a year ago

I've tried both and non of them work. When printing the header option it seams to be ok but when I check it in the network tab it's not there.

Deutro · Accepted Answer · 2017-02-09 11:08:05Z

1

You should either set the value in the constructor of the Header like this:

var headers = new Headers({'Authorization', 'Bearer XXXXXXX'});

or you have to use the append method:

var headers = new Headers();
headers.append('Authorization', 'Bearer XXXXXX');

Edited due to changed question:

Since I do not really know how you handle your request I can show you the solution I came up with in my Spring backend:

if ("OPTIONS".equals(request.method, ignoreCase = true)) {
    response.status = HttpServletResponse.SC_OK
} else {
    chain.doFilter(req, res)
}

So in your backend you should check the request method and if it equals "OPTIONS" than you can set the response status to 200 and you are done.

edited Feb 9, 2017 at 11:08

answered Feb 8, 2017 at 17:43

Deutro

3,3634 gold badges20 silver badges27 bronze badges

2 Comments

ZanattMan Over a year ago

I've used all the known ways (the constructor, append and set) and none of them work. When printing the header in the console it seams to be working fine but in the navigation tab there is no Authorization header (as it's shown in the console)

ZanattMan Over a year ago

As I've extended in the question, It's not going trough the OPTIONS call but the header is correctly setted. The problem then is why is failing in the first OPTIONS call.

ZanattMan · Accepted Answer · 2017-02-10 12:45:43Z

0

Following this guide http://restlet.com/blog/2015/12/15/understanding-and-using-cors/ you can read the following:

An important comment. You must take into account that, when executing CORS request containing security, i.e. an Authorization header, the OPTIONS request won’t contain it. So you need to be careful regarding security when handling the first OPTIONS requests of preflighted ones. As a matter of fact, no authentication check can be done at this level.

So there is no Authorization header in the first OPTION call.

answered Feb 10, 2017 at 12:45

ZanattMan

7361 gold badge9 silver badges26 bronze badges

3 Comments

stackdave Over a year ago

but how did you solve it ? can you show the code?, I get error from my server, not from postman or curl, just with angular 4.1.2

stackdave Over a year ago

api programmer told me that OPTIONS must have authorisation code, so the api works like that, but my browser dont send OPTIONS with auth, how to force my browser to do it ?

ZanattMan Over a year ago

If there is no jwt authorization, it will send a normal request without the OPTIONS

Floern · Accepted Answer · 2017-04-29 19:04:31Z

0

Add this line to your security configuration:

.antMatchers(HttpMethod.OPTIONS,"/**").permitAll()

edited Apr 29, 2017 at 19:04

Floern

34k24 gold badges106 silver badges122 bronze badges

answered Apr 29, 2017 at 18:43

Rahul Tiwari

4825 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular 2 http not setting header

4 Answers 4

1 Comment

2 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

3 Comments

Comments

Linked

Related