# CORS issue when loading JSON in p5

**URL:** <https://discourse.processing.org/t/cors-issue-when-loading-json-in-p5/16727>\
**Category:** Coding Questions\
**Created:** [December 30, 2019, 3:34pm UTC](https://discourse.processing.org/t/cors-issue-when-loading-json-in-p5/16727 "2019-12-30T15:34:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gjs](https://avatars.discourse-cdn.com/v4/letter/g/eada6e/32.png) [@gjs](https://discourse.processing.org/u/gjs)\
**Post date:** [December 30, 2019, 3:34pm UTC](https://discourse.processing.org/t/cors-issue-when-loading-json-in-p5/16727/1 "2019-12-30T15:34:49Z")

</div>

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](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](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:

```auto
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:

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 30, 2019, 4:10pm UTC](https://discourse.processing.org/t/cors-issue-when-loading-json-in-p5/16727/2 "2019-12-30T16:10:31Z")

</div>

> [@gjs](#):
>
> No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

> [@Ml5 NetworkError](https://discourse.processing.org/t/ml5-networkerror/16191/2):
>
> [yacdn.org](http://yacdn.org)

---

<div class="post-metadata">

**Author:** ![gjs](https://avatars.discourse-cdn.com/v4/letter/g/eada6e/32.png) [@gjs](https://discourse.processing.org/u/gjs)\
**Post date:** [December 30, 2019, 8:19pm UTC](https://discourse.processing.org/t/cors-issue-when-loading-json-in-p5/16727/3 "2019-12-30T20:19:38Z")

</div>

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](https://thecodingtrain.com/Tutorials/10-working-with-data/10.4-loading-json-from-url.html) 😀

```auto
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);
}

```