AngularJS request JSON from other domain

Question

AngularJS request JSON from other domain

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

javascript
ajax
json
angularjs
cors

Answer 1

As far as I understand CORS has to be enabled on the server

Correct.

However I don't know if that's the case with Wikia.

Since you get the error message:

No 'Access-Control-Allow-Origin' header

… it is not enabled.

So JSONP seems to be the only way.

JSONP is a hack to work around the same origin policy. It isn't as elegant as CORS (which is designed to give explicit permission) but it requires that the server express the data in JSONP.

The error message:

Refused to execute script from '*&callback=JSON_CALLBACK' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

means that the response to the HTTP request is not JSONP (which would have an application/javascript Content-Type), so the server doesn't support it.

A website can't instruct a web browser to make an HTTP request to another server and give the response to its JavaScript without explicit permission from the site the request is being made to.

You'll need to look at an alternative where the request to the server doesn't come from the browser. e.g. by proxying the request through your own server.

Answer 2

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

Angularjs api - $http.jsonp();