CORS issue when loading JSON in p5

p5.js Coding Questions
1

I’m attempting to load a JSON and receive the following message:
“Access to fetch at ‘https://api.flightstats.com/flex/schedules/rest/v1/json/flight/AA/100/departing/2020/1/31?appId=XXX&appKey=XXX’ from origin ‘https://editor.p5js.org’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”
I’ve combed through the forums and found numerous discussions re: CORS as well as workarounds. However, I’ve tried several (i.e. adding crossorigin=“anonymous” inside script) without success on both the Chrome and Firefox browsers. Would be grateful for suggestions as to how to proceed.

My sketch with appID and appKey masked:

function setup() {
  let url = 'https://api.flightstats.com/flex/schedules/rest/v1/json/flight/AA/100/departing/2020/1/31?appId=XXX&appKey=XXX';
  loadJSON(url, getData);
}

function draw() {
  background(200);
}

function getData(data) {
  let fly = data.request.carrier.requestedCode;
  print(fly);
}

My index:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js" ></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js" ></script>
  </body>
</html>
2
3

Thanks GoToLoop. I tried several of the suggested browser extensions but none of them worked. Changing ‘json’ to ‘jsonp’ and adding ‘callback=getData’ to the tail of the url, however, did the trick. Dan Shiffman mentions this solution in his video https://thecodingtrain.com/Tutorials/10-working-with-data/10.4-loading-json-from-url.html :grinning:

function setup() {
  noLoop();
let url = 'https://api.flightstats.com/flex/schedules/rest/v1/jsonp/flight/AA/100/departing/2020/1/31?appId=XXX&appKey=XXX&callback=getData';
  loadJSON(url, getData, 'jsonp');
}

function draw() {
  background(200);
}

function getData(data) {
  let fly= data.request.carrier.requestedCode;
print(fly);
}
2 Likes