AngularJS CORS问题 [英] AngularJS CORS Issues
问题描述
我已搜查了200个站点（也许夸张，但不是很多），如何能够与angularjs处理CORS。我们有运行Web API服务器在本地机器。我们正在开发一个客户端上进行数据的API调用。当从服务器上运行客户端，我们收到的数据没有问题。当我们从不同的域运行它，我们得到了想要获取数据和空白响应，当红色的200响应。下面是一些code：
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;
}
};
});
我也试过这种使用$ HTTP，但我得到同样的反应（或缺乏）：
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) {
}
};
});
当我浏览到它吐出来的是数据的浏览器服务的JSON的网址。在服务器上，我们允许跨域起源它通过我的previous说法是显而易见的。正如你可以看到我实现覆盖myApp.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天这个任务。
帮助，这比美联社preciated多。先谢谢了。
Help with this is MORE than appreciated. Thanks in advance.
推荐答案
您可能需要改变你的Web API一点。我遇到了同样的问题，并写了一篇关于如何解决此问题的帖子。
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.
我用西纳特拉的API，我不知道你所使用的语言为你的web服务，但我想你可以应用它。基本上，你需要配置你的服务器以接受CORS通过定义的起源和被允许的HTTP方法的调用。
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 ?
有关详细信息，请参阅此帖子： CORS与angular.js
See this post for more details : CORS with angular.js
这篇关于AngularJS CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
