AngularJS CORS 问题

18 浏览
0 Comments

AngularJS CORS 问题

我搜索了超过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数据的URL时,它会输出数据。在服务器上,我们允许跨域来源,这一点可以从我之前的陈述中看出。正如你所看到的,我在myApp.config中实现了header的覆盖,我甚至尝试将其直接放在我的控制器中...但没有任何区别...

已经花了3天时间处理这个任务了。

非常感谢提前帮助。

0