Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I'm trying to retrieve data from the Wikia API with the following code. But everything seems to fail. As far as I understand CORS has to be enabled on the server, from which I am trying to retrieve data. However I don't know if that's the case with Wikia. So JSONP seems to be the only way. But im getting the error

XMLHttpRequest cannot load http://adventuretime.wikia.com/api/v1/Articles/List?expand=1&category=Episodes&limit=200. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://website.com' is therefore not allowed access.

I've read the AngularJS docs: https://docs.angularjs.org/api/ng/service/$http

w3schools: http://www.w3schools.com/angular/angular_http.asp

And numerous questions on stackoverflow. Is there anything terrible wrong with my code? Angular should support CORS and JSONP requests natively

My code is following:

Index.html

<!DOCTYPE html>
<html ng-app="episodes">
<head>
    <meta charset="UTF-8">
    <title>Episodes</title>
    <script src="angular.js"></script>
    <script src="workshop.js"></script>
</head>
<body ng-controller="AppController as app">

    <table>
        <thead> 
            <tr>
                <th>Title</th>
                <th>Url</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="episode in app.episodes">
                <td>{{episode.title}}</td>
                <td>{{episode.url}}</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

workshop.js

(function(){
    angular
        .module('episodes', [])
        .controller('AppController', function($http){
            var app = this;

            app.episodes = $http({
                url: "http://adventuretime.wikia.com/api/v1/Articles/List?expand=1&category=Episodes&limit=200",
                dataType: "jsonp"
            });

        });
})();

Any help is appreciated!

Thanks in advance for any help

EDIT

The Response Headers are:

Content-Encoding: gzip
X-Content-Type-Options: nosniff
X-Cacheable: YES
Age: 0
X-Cache: ORIGIN, MISS, MISS
Content-Length: 21965
X-Served-By: ap-s21, cache-wk-sjc3160-WIKIA, cache-fra1233-FRA
X-Backend-Response-Time: 2.267
Server: Apache
X-Timer: S1439118796.704444,VS0,VE2447
Vary: Accept-Encoding
Content-Type: application/json; charset=utf-8
Cache-Control: public, max-age=86400
Accept-Ranges: bytes
X-Cache-Hits: ORIGIN, 0, 0
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
669 views
Welcome To Ask or Share your Answers For Others

1 Answer

Try use $http.jsonp(url); for cross domain requests;

Angularjs api - $http.jsonp();


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...