XHR 的 AngularJS 服务

Question

我正在尝试在 AngularJS 中创建一个服务，该服务会从网站获取我的 JSON 数据。 我将服务包装在工厂方法中，如下所示

App.factory('httpService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    return {
        getData : function() {
            var url = "http://www.reddit.com/.json?callback=JSON_CALLBACK";
            return $http.jsonp(url).then(
                function(result) {
                    return result;
                });
        }
    }
});

我遇到的问题是收到错误Uncaught SyntaxError: Unexpected token :。当我使用 get() 而不是 json() 时，我收到 501/CORS 错误。

我试图从中获取数据的 URL 是： http://api.4chan.org/b/1.json http://www.reddit.com/.json

以下是我的 jsfiddle 的链接以及其余代码。

http://jsfiddle.net/fatgamer85/adPue/3/

有人知道如何解决这个问题吗？

编辑：我已设法获取数据并解决了问题。感谢 sza

以下是我用过的代码，如果有人感兴趣的话

var myApp = angular.module("client", []);

myApp.factory('myXHRService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    return {
        getData : function(url) {
            return $http.jsonp(url).then(
                function(result) {
                    return result.data;
                }
            );
        }
    }
});

myApp.controller('MainCtrl', function($scope, myXHRService) {
    $scope.xhrData = {};
    $scope.data = {};
    $scope.url = "http://www.reddit.com/.json?jsonp=JSON_CALLBACK";
    myXHRService.getData($scope.url).then(function(data) {
        var xhrData = angular.fromJson(data);
        $scope.xhrData = xhrData.data.children;
    });
});

myApp.config(function($httpProvider){
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

这里的主要区别是URL参数jsonp中的回调除此之外，一切正常且花花公子。

Answer 1

我认为这可能与 Reddit.com 的 API 端点问题有关。如果您尝试使用此 API，它将使用 jsonp 工作

var url = "http://www.reddit.com/top.json?jsonp=JSON_CALLBACK";

对于 API /.json，我建议您实现服务器端代码来检索数据，尽管它返回有效的 JSON，但不知何故无法跨域正确访问。