$http.post Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers error

In my app module config section I have the following:

angular.module('starterapp', ['ionic'])  .config(function ($stateProvider, $httpProvider, $urlRouterProvider) {    // We need to setup some parameters for http requests    // These three lines are all you need for CORS support    $httpProvider.defaults.useXDomain = true;    $httpProvider.defaults.withCredentials = true;    delete $httpProvider.defaults.headers.common['X-Requested-With'];  }

That is all you need to have to make all the HTTP requests work with CORS. This of course assumes you have made your backend.

You adding those additional headers would not be allowed according the w3c specification for XMLHTTPRequest as they may only be added by the host browser.

PaulT's answer got me very close to solving this problem for myself, but I also had to explicitly add the Content-Type for my post operations.

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

Hope this helps.

I got it working by just adding JSONP as the method

$resource( 'http://maps.google.com/maps/api/geocode/json?address=:address&sensor=false', {}, { get: { method: 'JSONP', } });