AngularJS CORS Issues

Question

I have searched over 200 sites(maybe exaggerating, but not by much) on how to be able to handle cors with angularjs. We have a local machine running a web API server. We are developing a client that calls on the API for data. When running the client from the server we receive data no problem. When we run it from a different domain we get a red 200 response when trying to fetch data and a blank response. Here is some code:

var myApp = angular.module('Project', ['ngResource']);  myApp.config(function($routeProvider){     $routeProvider.         when('/new', {templateUrl:'templates/new.html', controller:'EditProjectController'}).         when('/mobile', {templateUrl:'templates/mobile.html', controller:'ProjectController'}).         when('/it', {templateUrl:'templates/it.html', controller:'ProjectController'}).         when('/writing', {templateUrl:'templates/writing.html', controller:'ProjectController'}).         when('/all', { templateUrl: 'templates/all.html' }).         when('/login', { templateUrl: 'partials/_login.html' }).         otherwise({ redirectTo: '/all' }); }); myApp.config(['$httpProvider', function ($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; } ]);    myApp.controller('ProjectController',  function myApp($scope, $http, projectDataService, userLoginService) {     $http.defaults.useXDomain = true;     $scope.loadProject = function(){         projectDataService.getProject(function(project){             $scope.project = project;             })       };     $scope.loadProject(); }  );  myApp.factory('projectDataService', function ($resource, $q) { var resource = $resource('http://webapiserver/api/:id', { id: '@id' }); return {     getProject: function () {         var deferred = $q.defer();         resource.query({ id: 'project' },             function (project) {                 deferred.resolve(project);             },             function (response) {                 deferred.reject(response);             });          return deferred.promise;     },     save: function (project) {         var deferred = $q.defer();         project.id = 'project/9';         resource.save(project,             function (response) { deferred.resolve(response); },             function (response) { deferred.reject(response); }             );         return deferred.promise;     } }; }); 

I have also tried this using $http but I get the same response (or lack thereof):

myApp.factory("projectDataService", function ($http) {  return {     getProject: function (successcb) {         $http.get("http://webapiserver/api/project").         success(function (data, status, headers, config) {             successcb(data);         }).         error(function (data, status, headers, config) {      } }; }); 

When I just browse to the url that is serving up the json in the browser it spits out the data. On the server we are allowing cross domain origins which is apparent by my previous statement. As you can see I am implementing the headers overrides in myApp.config I have even tried putting it directly in my controller... no difference...

3 days now on this task.

Help with this is MORE than appreciated. Thanks in advance.

Answer 1

You may need to change your Web API a bit. I met the same kind of problem and wrote a post about how to fix this issue.

I used Sinatra for the API, I don't know what language you are using for your webservices but I guess you can apply it. Basically, you need to configure your server to accept CORS calls by defining which origins and which HTTP methods are allowed.

You said you already enable it on your server, but what did you do exactly ?

See this post for more details : CORS with angular.js