AngularJS：从 Wikipedia API 使用 Web 服务答案

【问题标题】：AngularJS: consume web service from Wikipedia APIAngularJS：从 Wikipedia API 使用 Web 服务
【发布时间】：2015-06-09 02:57:29
【问题描述】：

我正在开发一个 AngularJS 应用程序，我想显示一些来自 Wikipedia 的信息，但由于 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 和其他网站上阅读过的解决方案。

谁能帮帮我？

谢谢

【问题讨论】：

标签： javascript angularjs cors wikipedia-api

【解决方案1】：

您可以使用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>

【讨论】：