AngularJS CORS 问题 [英] AngularJS CORS Issues
问题描述
我已经搜索了 200 多个网站(可能有点夸张，但不是很多)关于如何使用 angularjs 处理 cors.我们有一台运行 Web API 服务器的本地机器.我们正在开发一个调用 API 获取数据的客户端.从服务器运行客户端时，我们接收数据没有问题.当我们从不同的域运行它时，我们会在尝试获取数据和空白响应时收到红色 200 响应.这是一些代码:
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 的 url 时，它会吐出数据.在服务器上，我们允许跨域来源，这在我之前的声明中很明显.如您所见，我正在 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 天了.
3 days now on this task.
对此的帮助非常感谢.提前致谢.
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.
我使用 Sinatra 作为 API，我不知道您的网络服务使用的是什么语言，但我想您可以应用它.基本上，您需要通过定义允许哪些来源和哪些 HTTP 方法来配置您的服务器以接受 CORS 调用.
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 with angular.js
See this post for more details : CORS with angular.js
这篇关于AngularJS CORS 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
