AngularJS CORS问题

Question

我已经搜索了200多个站点（可能有点夸张，但幅度不大），以了解如何使用angularjs处理cors。我们有一台运行Web
API服务器的本地计算机。我们正在开发一个调用API数据的客户端。从服务器运行客户端时，我们不会收到任何问题。当我们从其他域运行它时，尝试获取数据时会收到红色的200响应，而响应为空。这是一些代码：

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;
    }
};
});

我也使用$ http尝试过此操作，但得到的响应相同（或缺少响应）：

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) {

    }
};
});

当我只是浏览到在浏览器中提供json的网址时，它会吐出数据。在服务器上，我们允许跨域起源，这在我之前的声明中显而易见。如您所见，我正在myApp.config中实现标头覆盖，甚至尝试将其直接放在控制器中…没什么区别…

现在3天完成此任务。

对此的帮助远胜于赞赏。提前致谢。

Answer 1

您可能需要稍微更改Web API。我遇到了同样的问题，并写了一篇有关如何解决此问题的文章。

我使用Sinatra作为API，但我不知道您用于Web服务的语言是什么，但是我想您可以应用它。基本上，您需要通过定义允许的来源和HTTP方法来配置服务器以接受CORS调用。

您说您已经在服务器上启用了它，但是您到底做了什么呢？

有关更多详细信息，请参见此帖子：具有angular.js的CORS