# Including API key in the header :(

**URL:** <https://discourse.processing.org/t/including-api-key-in-the-header/21936>\
**Category:** Coding Questions\
**Created:** [June 17, 2020, 12:49am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936 "2020-06-17T00:49:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sasaKDH](https://avatars.discourse-cdn.com/v4/letter/s/779978/32.png) [@sasaKDH](https://discourse.processing.org/u/sasaKDH)\
**Post date:** [June 17, 2020, 12:49am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/1 "2020-06-17T00:49:00Z")

</div>

I want to use API but I’m not familiar with JSON and API ☹  
The site said me that I shoud include my apikey in the header but I don’t know how.

```auto
function preload(){
  let url1 = "https://static.api.nexon.co.kr/fifaonline4/latest/spid.json";
  
  httpDo(
    url1,
    {
      method: 'GET',
      // Other Request options, like special headers for apis
      headers: { authorization: apikey},
      datatype: 'json'
    },
    function(res) {
      spid = res;
    }
  );
}

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(255);
  fill(0);
  console.log(spid[0]);
}

```

The cosole says  
Uncaught TypeError: Cannot read property ‘0’ of undefined (sketch: line 28)  
TypeError: Failed to fetch

I thought httpDo is the way to include my apikey in the header but,

Does anyone know how to include apikey in the header?  
And the structure of file is

 ![제이슨](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/754b3308775c61ef0d1aa5ddf66577a62bce2a76.png)

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [June 17, 2020, 11:25am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/2 "2020-06-17T11:25:15Z")

</div>

Every API is different, there’s no single way to provide an API key. It’s up to the designer of the API. So we can’t tell if your code fetches the JSON as intended unless you share a link to the API documentation.

The code has another potential problem as-well; the variable `spid` may not be available when `draw` is called. (Like I [mentioned last time](https://discourse.processing.org/t/how-can-i-read-this-json-file/21623/3).) You can see one [possible solution to that problem in the documentation](https://p5js.org/reference/#/p5/httpDo) (the code right below the comment `// wait until the data is loaded`).

---

<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:** [June 18, 2020, 1:03am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/3 "2020-06-18T01:03:43Z")

</div>

> [@sasaKDH](#):
>
> Uncaught TypeError: Cannot read property ‘0’ of undefined (sketch: line 28)

I’m suspicious that **httpDo()**, **httpGet()** & **httpPost()** don’t take advantage of **preload()**.

Therefore the execution can reach **setup()** & even **draw()** and the loading isn’t finished yet!

That’s why your `console.log(spid[0]);` fails, b/c _spid[]_ array hasn’t been initialized by the success callback `function (res) { spid = res; }` within **httpDo()**.

> [@sasaKDH](#):
>
> Does anyone know how to include apikey in the header?

According to the **httpDo()**'s example you seem to be doing it right by including a _headers_ property:

> **[reference | p5.js](https://p5js.org/reference/#/p5/httpDo)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

But given I don’t have your API Key, I’ve written a sketch to get the file “spid.json” via a CDN proxy.

If you wish you can take a look at it:

> <https://gist.github.com/GoSubRoutine/f6b689fbb36320ff6d9296a8d273d3c3>

---

<div class="post-metadata">

**Author:** ![sasaKDH](https://avatars.discourse-cdn.com/v4/letter/s/779978/32.png) [@sasaKDH](https://discourse.processing.org/u/sasaKDH)\
**Post date:** [June 18, 2020, 4:56am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/4 "2020-06-18T04:56:35Z")

</div>

Thanks for your answer 🙂  
Oh, I didn’t expect preload() doesn’t work for httpDo()

I add if(spid) in the draw func to solve this porblem, but I got TypeError: Failed to fetch and still I can’t print spid[0] in my console ☹

I read your code and I have some questions.  
Do you get the data without apikey? Is it possible?

---

<div class="post-metadata">

**Author:** ![sasaKDH](https://avatars.discourse-cdn.com/v4/letter/s/779978/32.png) [@sasaKDH](https://discourse.processing.org/u/sasaKDH)\
**Post date:** [June 18, 2020, 5:06am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/5 "2020-06-18T05:06:29Z")

</div>

Thanks for your answer 🙂

[https://developers.nexon.com/fifaonline4/guides#slink7](https://developers.nexon.com/fifaonline4/guides#slink7)  
This is the site that I want to get the api and I think it’s hard for you to interpret because it’s in Korean

And I add if(!spid) return; to solve the another problem  
Now I get only TypeError: Failed to Fetch

---

<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:** [June 18, 2020, 6:32am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/6 "2020-06-18T06:32:51Z")

</div>

> [@sasaKDH](#):
>
> , but I got TypeError: Failed to fetch and still I can’t print `spid[0]` in my console ☹

It means download has failed!

> [@sasaKDH](#):
>
> Do you get the data without apikey? Is it possible?

Well, if my online sketch is running OK it means it’s fetched “spid.json” successfully via a proxy CDN.

However, I’ve used regular **loadJSON()** instead of **httpDo()**.

---

<div class="post-metadata">

**Author:** ![sasaKDH](https://avatars.discourse-cdn.com/v4/letter/s/779978/32.png) [@sasaKDH](https://discourse.processing.org/u/sasaKDH)\
**Post date:** [June 18, 2020, 6:38am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/7 "2020-06-18T06:38:48Z")

</div>

In console, I get error  
“Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.”  
I think this is the reason that the download has failed  
I google it and now I know that this is the problem of CORS policy but I can’t find the solution of this.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [June 18, 2020, 9:05am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/8 "2020-06-18T09:05:52Z")

</div>

Is an API key even needed? This works for me:

```javascript
let spid;

function preload() {
  spid = loadJSON('https://static.api.nexon.co.kr/fifaonline4/latest/spid.json');
}

function setup() {
  console.log(spid[0]);
}

```

Resulting in this output:

```auto
Object {id: 101000001, name: "데이비드 시먼"}
 id: 101000001
 name: "데이비드 시먼"

```

---

<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:** [June 18, 2020, 10:13am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/9 "2020-06-18T10:13:39Z")

</div>

> [@Sven](#):
>
> Is an API key even needed? This works for me:

Using a local server just the raw URL was enough here.

But it runs into a CORS block when the sketch is served on [Bl.ocks.org](http://Bl.ocks.org), unless I use a proxy site such as [YaCDN.org](http://YaCDN.org).

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [June 18, 2020, 10:21am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936/10 "2020-06-18T10:21:45Z")

</div>

Weird. 🤔 My example above works on [https://editor.p5js.org](https://editor.p5js.org) in Safari 13.1.1 and Chrome 83.