Request header field is not allowed by Access-Control-Allow-Headers with $http

Question

I'm doing a POST to a service using Postman Chrome Extension, and I get the expected response.

But, when I do the same POST request using $http, all goes to hell.

I get a :

Request header field Engaged-Auth-Token is not allowed by Access-Control-Allow-Headers

Engaged-Auth-Token being a header.

I've no idea why with Postman works and it doesn't work with Chrome...

Any ideas?

Solution 1

The issue is because of missing Access-Control-Allow-Headers from request Header. To fix this we need to add Access-Control-Allow-Headers: * to request header

Add a Access-Control-Allow-Headers to the http request header. You can do this at app level using $httpProvider. Add below line in your app config section to add this header.

var app = angular.module("app", [
    "ngRoute",
    "app.controllers",
    "app.directives",
    "app.filters"
]);

app.config([
    "$routeProvider",
    "$httpProvider",
    function($routeProvider, $httpProvider){
        $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';
    }
]);

Solution 2

I believe configuring the Access-Control-Allow-Headers on the $httpProvider on the CLIENT will not work. I think the header needs to be configured on the server (as a response header). In a node-express application for instance, this could be done with a middleware (for example), putting something like this:

res.header('*')

or (more selectively) just the headers you need:

res.header('Engaged-Auth-Token, Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');