$http.get is not allowed by Access-Control-Allow-Origin but $.ajax is

This is probably due to the default behavior of Angular to include the request header 'X-Requested-With', which can cause problems with CORS. This was fixed in v 1.1.1 (the unstable branch - see v1.1.1 bug fixes) by removing the header from cross domain requests: https://github.com/angular/angular.js/issues/1004.

It's easy to remove the header and get this working on the 1.0 branch. The following line will remove the header from all requests (not only CORS) done by the $http service in your app:

yourModule  .config(function($httpProvider){    delete $httpProvider.defaults.headers.common['X-Requested-With'];});

UpdateA little warning - Angular (like jQuery) doesn't support CORS for IE9. IE10 is the first IE browser that supports CORS. This blogpost describes how you can get CORS support in IE8/IE9 under certain conditions, but it won't work with the Angular $http service: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

web.config

<system.webServer> <httpProtocol>     <customHeaders>       <add name="Access-Control-Allow-Origin" value="*" />     </customHeaders>   </httpProtocol>  </system.webServer>

The answer above solved the problem.

<httpProtocol>    <customHeaders>        <add name="Access-Control-Allow-Origin" value="*" />     </customHeaders></httpProtocol>

When an HTML page was calling an angular controller with a service like:

$http.get(dataUrl).success(function (data) {     $scope.data.products = data;}).error(function (error) {    $scope.data.error = error;});