AngularJS:使用Wikipedia API中的Web服务

时间:2015-04-04 02:14:19

标签: javascript angularjs cors wikipedia-api

我正在开发一个AngularJS应用程序,我希望显示来自维基百科的一些信息,但我无法访问Angular中的数据,因为CORS限制。

     $scope.wikipediaData =  $http.get('http://es.wikipedia.org/w/api.php?titles='+$scope.country.name.toLowerCase()+'&rawcontinue=true&action=query&format=json&prop=extracts');

它进行调用,我在firebug中看到它,我复制了url并将其粘贴到另一个选项卡中,我可以看到JSON响应。

在萤火虫中我也看到我必须激活CORS,但我不知道该怎么做,我尝试了很多我在StackOverflow和其他网站上阅读过的解决方案。 / p>

任何人都可以帮助我?

由于

1 个答案:

答案 0 :(得分:12)

您可以使用JSONP来避免CORS问题。

简而言之:服务器必须支持JSONP,因为它将创建一个返回字符串,并将回调作为返回JSON的包装器。然后你的回调函数将获得JSON作为参数。 你不需要管理它,因为Angular会为你处理这个问题。

您只需将&callback=JSON_CALLBACK添加到您的网址并使用$http.jsonp

请查看下面的演示,并点击此处jsfiddle

(维基百科有回复,但我不知道回报是否符合您的要求。)



var app = angular.module('myApp', []);

app.factory('wikiService', function($http) {
      
    var wikiService = {
        get: function(country) {
            return $http.jsonp('http://es.wikipedia.org/w/api.php?titles=' + country.name.toLowerCase() + '&rawcontinue=true&action=query&format=json&prop=extracts&callback=JSON_CALLBACK');
        }
    };
    
    return wikiService;
});
    
app.controller('MainController', function($scope, wikiService) {

    wikiService.get({name: 'Germany'}).then(function(data) {
        console.log(data);
        $scope.wikiData = data.data;
    });
      
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainController">
    <pre ng-bind="wikiData | json"></pre>
</div>
</div>
&#13;
&#13;
&#13;