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.
See Question&Answers more detail:
os 
