Angularjs and HTTP headers

Question

I would like to send my custom HTTP header to the REST service every time I make any request. I am using Apache HTTP Web Server. I have the following code:

app.config(['$httpProvider', function($httpProvider){

if(!$httpProvider.defaults.headers.get){
    $httpProvider.defaults.headers.get = {};
}

$httpProvider.defaults.headers.get['My-Token'] = 'some_test_token';
}]);

But I see next in the devtools:

My header inline into other. What am I doing wrong?

Answer 1

The screenshot that you provided deals with the OPTIONS request, whereas you are configuring the GET request. An OPTIONS request is sent as part of the implementation of content negotiation in HTTP.

In this case, you are sending the preflight OPTIONS request, which in turn indicates that your future request will include the my-token header. This is desired behaviour, since the server can now instruct the client to not proceed with this request or perform a conditional action.

In your browser (or other software you're using to debug HTTP), look for the GET request and you should see your header included correctly.

Answer 2

The trouble wasn't at the AngularJS side. I just configure the Apache HTTP server and back-end part of my application. My Spring Security filter chain blocked OPTIONS requests.