Angular $http not sending header in OPTIONS pre-flight

Question

I'm trying to connect to an API with the $http service that requires a certain header to be defined for POST requests:

app.run(['$http', function($http) {
    $http.defaults.headers.post.hello = 'world';
}]);

However, my Angular app sends an OPTIONS request before the POST, and it does not appear to be sending the custom-defined header.

Check out the network tab in this Plunker: http://plnkr.co/edit/tcqIb2q9zIQb3nf2SzyT

And watch see that where the request is supposed to send a hello header with the value of world, it actually isn't:

I see the hello in the access-control-request-header, but shouldn't it be on its own line? And why doesn't it send the value world?

Answer 1

When you add a header, because you are going across different domains, 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. In this request the header name is sent in the access-control-request-headers to check if it is a safe header to send.

If it is safe to send then the header will be sent with the POST.

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