3

I am trying to get free NFL data from an API by suredbits. Unfortunately, in their header, they have not added Access-Control-Allow-Origin, which creates a CORS issue. When I try and run code like this...

$.getJSON("http://api.suredbits.com/nfl/v0/stats/jones/julio", function(playerData) {
      alert(playerdata); 
}

I keep getting this error No 'Access-Control-Allow-Origin' header is present on the requested resource.

So basically, is their any way to fix their mistake through the client side?

Ethernetz
  • 906
  • 3
  • 16
  • 33
  • 1
    no, because CORS protects resources - you could proxy requests via **your** server, then CORS isn't an issue – Jaromanda X Sep 09 '17 at 03:28
  • That's what I've come to realize after reading just about every question about this on stackoverflow. Are there any tutorials or anything that could teach me how to do that? – Ethernetz Sep 09 '17 at 03:30
  • depends on your server side technology – Jaromanda X Sep 09 '17 at 03:30
  • You can just make the calls serverside. I don't think this is so much a mistake by them, they simply don't want to be called by any random browser internet-wide. – pvg Sep 09 '17 at 03:31
  • pvg, what do you mean make calls serverside? I don't manage the api if thats what you mean. – Ethernetz Sep 09 '17 at 03:34
  • 1
    I have to admit it is a bit strange the API wouldn't include that header. I believe the best thing to do for now is to reach out to SuredBits (https://twitter.com/suredbits) and ask if that's a mistake or if they have any alternative methods of querying the data from JS (with a token?). The only other alternative to getting this work from JS is setting up a proxy on your web server - all this means is that it is your own server getting data from the API and then returning it to your script (thus avoiding the CORS issues). – mnewelski Sep 09 '17 at 03:49
  • Matt, are there any good tutorials to achieving that? – Ethernetz Sep 09 '17 at 03:55

1 Answers1

6

There is actually a way to fix it from client side: by changing the request URL to https://cors-anywhere.herokuapp.com/http://api.suredbits.com/nfl/v0/stats/jones/julio:

const proxyURL = "https://cors-anywhere.herokuapp.com/";
const requestURL = "http://api.suredbits.com/nfl/v0/stats/jones/julio";
$.getJSON(proxyURL + requestURL, function(playerData) {
  console.log(playerData);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Yeah, that’s not exactly fixing it from the client side—since what it’s actually doing is, causing the request to get made through https://cors-anywhere.herokuapp.com/, which is an open CORS proxy that just adds the Access-Control-Allow-Origin response header so that browsers will allow your frontend JavaScript code to access the response.

But as demonstrated in the code snippet in the answer, it definitely doesn’t require any changes to the server hosting the API endpoint you want to get data from. Instead all it requires a trivial change to your own frontend code.

Of course relying on a public open proxy like this is not the right solution in all cases. But at least it’s a good solution in the case where the API provider just hasn’t gotten around to CORS-enabling their API so that you could send requests to it directly and get responses you can use.

The How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems section of the answer at No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API has a few more details.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
  • 3
    It's not 'not exactly fixing it from the client-side', it's not a client-side fix at all. – pvg Sep 09 '17 at 11:06