AngularJS:使用维基百科API的web服务

AngularJS: consume web service from Wikipedia API

本文关键字：百科 API 服务 web AngularJS      更新时间：2023-09-26

我正在开发一个AngularJS应用程序，我想显示维基百科上的一些信息，但由于CORS的限制，我无法访问Angular中的数据。

     $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响应。

在firebug中，我也看到我必须激活CORS，但我不知道怎么做，我尝试了很多在StackOverflow和其他网站上阅读的解决方案。

有人能帮我吗？

感谢

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

简而言之：服务器必须支持JSONP，因为它将创建一个带有回调的返回字符串，作为返回JSON的包装。然后，回调函数将获取JSON作为参数。您不需要管理它，因为Angular将为您处理此问题。

您只需要将&callback=JSON_CALLBACK添加到您的url并使用$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>

相关文章：