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?

Answer 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'] = '*';
    }
]);

Answer 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');

Answer 3

if use sails api on backend change cors.js and add your token filed here

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};