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

Question

I am doing a POST for a service using the Chrome Postman Extension , and I get the expected response.

But, when I execute the same POST request using $http , everything goes to hell.

I get:

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

Engaged-Auth-Token is the header.

I don’t know why Postman works and it doesn’t work with Chrome ...

Any ideas?

Answer 1

The problem is due to the lack of Access-Control-Allow-Headers from the request header. To fix this, we need to add Access-Control-Allow-Headers: * to request a header

Add Access-Control-Allow-Headers to the http request header . You can do this at the application level using $httpProvider . Add the line below to your application configuration 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 that setting Access-Control-Allow-Headers to $ httpProvider in the CLIENT will not work. I think the header should be configured on the server (as the response header). For example, in a node-express application, this can be done using middleware (for example) by putting something like this:

 res.header('*') 

or (more selectively) just the right headers:

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

Answer 3

if you use api sails to change the cors.js backend and add your token specified 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' };