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

i have problem fetching json remote server control. have 2 web applications, 1 serving data , running on port 3311, other, requesting data, running on port 5000.

using jquery following works:

$.ajax({   url: "http://localhost:3311/get-data",   type: 'get',   datatype: 'json',   beforesend: function(xhr) {     xhr.setrequestheader("x-some-header", "some-value");   } }) .done(function(data) {      $rootscope.$apply(function() {d.resolve(data); }); }) .fail(function(data) {     $rootscope.$apply(function() {d.reject(data); }); }); 

when attempting same request angular

$http     .get("http://localhost:3311/get-data", { headers: {"x-some-header": "some-value"} })     .success(function(data) { d.resolve(data);})     .error(function(data) { d.reject(data); }); 

i receive error

origin http://localhost:5000 not allowed access-control-allow-origin. 

the console log shows error occurring after options request returns http200

options http://localhost:3311//get-data 200 (ok) angular.min.js:99  (anonymous function) angular.min.js:99  l angular.min.js:95  m angular.min.js:94  (anonymous function) app.js:78  b.extend.each jquery-1.9.1.min.js:3  b.fn.b.each jquery-1.9.1.min.js:3  (anonymous function) app.js:76  d angular.min.js:28  instantiate angular.min.js:28  (anonymous function) angular.min.js:52  updateview angular-ui-states.js:892  e.$broadcast angular.min.js:90  transition angular-ui-states.js:324  h angular.min.js:77  (anonymous function) angular.min.js:78  e.$eval angular.min.js:88  e.$digest angular.min.js:86  e.$apply angular.min.js:88  e angular.min.js:94  o angular.min.js:98  s.onreadystatechange angular.min.js:99 

and headers being returned options request are

http/1.1 200 ok cache-control: private content-type: text/plain server: microsoft-iis/8.0 access-control-allow-origin: * access-control-allow-methods: get, post, options access-control-allow-headers: content-type, accept, x-requested-with, x-some-header x-aspnet-version: 4.0.30319 x-sourcefiles: =?utf-8?b?.... x-powered-by: asp.net date: tue, 21 may 2013 01:52:37 gmt content-length: 0 

this due default behavior of angular include request header 'x-requested-with', can cause problems cors. fixed in v 1.1.1 (the unstable branch - see v1.1.1 bug fixes) removing header cross domain requests: https://github.com/angular/angular.js/issues/1004.

it's easy remove header , working on 1.0 branch. following line remove header requests (not cors) done $http service in app:

yourmodule   .config(function($httpprovider){     delete $httpprovider.defaults.headers.common['x-requested-with']; }); 

update little warning - angular (like jquery) doesn't support cors ie9. ie10 first ie browser supports cors. blogpost describes how can cors support in ie8/ie9 under conditions, won't work angular $http service: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx