I know there are lot of duplicate questions.I tried all the solutions given there but still not working.

XMLHttpRequest cannot load http://localhost:3000/api/create. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response.

angularjs code

$httpProvider.defaults.headersmon = {};
        $httpProvider.defaults.headers.post = {};
        $httpProvider.defaults.headers.put = {};
        $httpProvider.defaults.headers.patch = {};
        $httpProvider.defaults.headers.get = {};
        $httpProvider.defaults.headersmon['Access-Control-Allow-     Headers'] = '*';
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headersmon['X-Requested-With'];

        $httpProvider.interceptors.push(['$injector',function($injector) {
            var mainFactory = $injector.get('mainFactory');
            return {
                request: function(config) {
                    var token = mainFactory.getToken();
                    config.headers.Authorization = 'Basic '+token;
                    return config;
                },

                response: function(response) {
                    return response;
                }
            };
}]);

nodejs code

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers','Content-Type,Authorization');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Accept");
next();
});

I know there are lot of duplicate questions.I tried all the solutions given there but still not working.

XMLHttpRequest cannot load http://localhost:3000/api/create. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response.

angularjs code

$httpProvider.defaults.headers.mon = {};
        $httpProvider.defaults.headers.post = {};
        $httpProvider.defaults.headers.put = {};
        $httpProvider.defaults.headers.patch = {};
        $httpProvider.defaults.headers.get = {};
        $httpProvider.defaults.headers.mon['Access-Control-Allow-     Headers'] = '*';
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.mon['X-Requested-With'];

        $httpProvider.interceptors.push(['$injector',function($injector) {
            var mainFactory = $injector.get('mainFactory');
            return {
                request: function(config) {
                    var token = mainFactory.getToken();
                    config.headers.Authorization = 'Basic '+token;
                    return config;
                },

                response: function(response) {
                    return response;
                }
            };
}]);

nodejs code

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers','Content-Type,Authorization');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Accept");
next();
});

• javascript
• angularjs
• node.js

• What if you remove this line? $httpProvider.defaults.headers.mon['Access-Control-Allow- Headers'] = '*'; – Alex T Commented May 11, 2016 at 19:00
• getting Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response ERROR – user3673959 Commented May 11, 2016 at 19:02
• It's been a while since I've worked with CORS, but I remember at least some implementations were not okay with the header "Access-Control-Allow-Origin", "*", and instead wanted you to explicitly repeat back the origin domain that the request came from. (Usually accessible via the "Origin" request header if you're trying to make a public API) – Katana314 Commented May 11, 2016 at 19:03

3 Answers 3

Thanks for the ments.I fixed it by install a npm package cors.I think the error was on the server side like @Katana314 mentioned.

    $httpProvider.defaults.headers.mon = {};
    $httpProvider.defaults.headers.post = {};
    $httpProvider.defaults.headers.put = {};
    $httpProvider.defaults.headers.patch = {};
    $httpProvider.defaults.headers.get = {};
    $httpProvider.defaults.headers.mon['Access-Control-Allow-Headers'] = '*';
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.mon['X-Requested-With'];

all these default headers can also be removed.Its working fine.

this is backend problem. if use sails api on backend change cors.js and add your all header fileds 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'
};

return $http.post(
  "url",
  formData,
  {
    transformRequest: angular.identity,
    headers: {"Content-Type": undefined}
  }
)