$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'];
});

Update A 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>

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

Related

Recent Posts