0

I should qualify that I am new to javascript before I go on. I have experience with C# and VBA but there are some web ideas that are taking some understanding.

As a side project I am trying to pull data from the fantasy premier league API (see an example here). I have been following other stack overflow queries and the w3s online tutorial and have the base code trying to pull the data below:

function getData() {
var element = document.getElementById("data");
var url = "http://fantasy.premierleague.com/web/api/elements/1/";
var text;

$.getJSON(url, function (player) {
    $.each(player, function (key, val) {
        text += key + ": " + val + "<br>";
    });
});

element.innerHTML = text;}

The problem is that I keep getting the same error when running this through chrome:

XMLHttpRequest cannot load http://fantasy.premierleague.com/web/api/elements/1/. No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there something wrong with my code, or is there something regarding the API that means my code can't access it? It is possible to go the link above and see the JSON file, so if there are access restrictions for javascript code, why is this possible?

See the code snipped below for the javascript with HTML.

function getData() {
    var element = document.getElementById("data");
    var url = "http://fantasy.premierleague.com/web/api/elements/1/";
    var text;

    $.getJSON(url, function (player) {
        $.each(player, function (key, val) {
            text += key + ": " + val + "<br>";
        });
    });

    element.innerHTML = text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>FantasyFootballData</title>
<body>
    <button onclick="getData()">Get first player data</button>
    <p id="data"></p>
</body>
Will Blair
  • 78
  • 4
  • Possible duplicate of http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work – Dan Lowe Sep 08 '15 at 21:26

1 Answers1

1

The issue here is called Same Origin Policy. You cannot access resources from different domains with javascript/ajax unless the server has some headers set (These headers work as gatekeepers, they whitelist given domains to allow them to perform calls and they tell the clients what verbs/actions they are allowed to perform). You should read more about CORS (Cross Origin Resource Sharing), and evaluate the possibility to perform the requests via JSONP or use a proxy client in order to achieve what you want.

Community
  • 1
  • 1
taxicala
  • 21,408
  • 7
  • 37
  • 66
  • What's the difference in this case between a browser accessing the webpage and downloading the file and JavaScript trying to do the same then? I think this is the bit I don't understand, the fact that it can be accessed one way but not another. – Will Blair Sep 08 '15 at 21:31
  • the browser access the webpage from the host. The javascript file is running in a different host. – taxicala Sep 08 '15 at 21:36
  • Ah OK, thanks for you help in clearing that up! Is there a way to use the fact that the browser can access the information to get the JSON file? – Will Blair Sep 08 '15 at 21:47