Cannot add custom header for $http.get in angularJS [duplicate]

Question

So, I am doing this request:

$http({
    method: 'GET',
    url: query,
    headers: { 'api-key': 'test-api-key' }
});

In Chrome Developer Tools Network tab I can see the request being sent:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,sv;q=0.6
Access-Control-Request-Headers:accept, api-key
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:my-host.myhost.net
Origin:http://localhost:24153
Pragma:no-cache
Referer:http://localhost:24153/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36
X-FirePHP-Version:0.0.6

Q: What possible reasons may there be that the header is not added to the request?

Quentin · Accepted Answer · 2015-12-17 09:31:39Z

2

You are making a cross-origin Ajax request with custom headers.

That makes it a complex request so the browser has to send a pre-flight OPTIONS request to get permission to make the cross-origin Ajax request.

If and when the server responds correctly to the OPTIONS request, the browser will make the GET request with the additional header you want.

answered Dec 17, 2015 at 9:31

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

7 Comments

Marcus Over a year ago

Ok, got you, so enabling CORS, setting Access-Control-Allow-Origin to * on the server side should enable the server to respond to the OPTIONS request and the custom header should be added? But any ideas to why this request works using Postman?

Luuk Moret Over a year ago

Chrome packaged apps can have cross domain permissions. See this post for more information.

Marcus Over a year ago

Unfortunately, adding the Access-Control-Allow-Origin response header and setting it to * did not help.

Quentin Over a year ago

@Marcus — No, you need to respond with a 200 OK that includes suitable Access-Control-Allow-Origin, and Access-Control-Allow-Headers (and probably Access-Control-Allow-Methods) headers. You're adding custom headers, allowing the origin alone is insufficient. There's an example in the MDN documentation linked to above.

Quentin Over a year ago

Err. How about saying that the api-key header that you are adding is allowed?!

|

Collectives™ on Stack Overflow

Cannot add custom header for $http.get in angularJS [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related