javascript - AngularJS: consume web service from Wikipedia API - Stack Overflow

admin管理员组

文章数量:1325012

I'm developing an AngularJS app, and I want to display some info from Wikipedia, but I can't access the data in Angular, because the CORS restriction.

     $scope.wikipediaData =  $http.get('.php?titles='+$scope.country.name.toLowerCase()+'&rawcontinue=true&action=query&format=json&prop=extracts');

It make the call and I see it in firebug, I copied the url and paste it in another tab and I can see the JSON response.

In firebug also I'm seeing that I have to activate CORS but I don't know how to do it, and I tried a lot of solutions that I have been reading in StackOverflow and another sites.

Anyone can help me?

Thanks

I'm developing an AngularJS app, and I want to display some info from Wikipedia, but I can't access the data in Angular, because the CORS restriction.

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

It make the call and I see it in firebug, I copied the url and paste it in another tab and I can see the JSON response.

In firebug also I'm seeing that I have to activate CORS but I don't know how to do it, and I tried a lot of solutions that I have been reading in StackOverflow and another sites.

Anyone can help me?

Thanks

• javascript
• angularjs
• cors
• wikipedia-api

Share Improve this question Follow edited Aug 24, 2015 at 14:07 Damjan Pavlica 34.1k1010 gold badges7575 silver badges7878 bronze badges asked Apr 4, 2015 at 2:14 Juan Pablo Pola DemoroJuan Pablo Pola Demoro 15311 gold badge33 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

You could use JSONP to avoid the CORS problem.

In short: The server have to support JSONP because it will create a return string with your callback as a wrapper around the returned JSON. Then your callback function will get the JSON as parameter. You don't need to manage that because Angular will handle this for you.

You'll only have to add &callback=JSON_CALLBACK to your url and use $http.jsonp.

Please have a look at the demo below and here at jsfiddle.

(There is a return from wikipedia but I don't know if the return is what you want.)

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

app.factory('wikiService', function($http) {
      
    var wikiService = {
        get: function(country) {
            return $http.jsonp('http://es.wikipedia/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./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>

本文标签： javascriptAngularJS consume web service from Wikipedia APIStack Overflow