# API POST error - not sure what's causing it

**URL:** <https://discourse.processing.org/t/api-post-error-not-sure-whats-causing-it/29311>\
**Category:** Coding Questions\
**Created:** [April 12, 2021, 6:47pm UTC](https://discourse.processing.org/t/api-post-error-not-sure-whats-causing-it/29311 "2021-04-12T18:47:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![psemme](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/psemme/32/12721_2.png) [@psemme](https://discourse.processing.org/u/psemme)\
**Post date:** [April 12, 2021, 6:47pm UTC](https://discourse.processing.org/t/api-post-error-not-sure-whats-causing-it/29311/1 "2021-04-12T18:47:23Z")

</div>

I’m trying to pull in RGB palette info from this cool color API - [Colormind API - extracting colors from photos and video](http://colormind.io/api-access/). I have it working in other API tools but when I place the code in P5 I get this error:

> Uncaught TypeError: Cannot read property ‘split’ of undefined (: line 56)  
> TypeError: Failed to fetch

I’ve tried following the example in Reference but am stumped. Thx for whatever insights you can provide!

```auto
function preload() {
  // Get color palette from colormind.io API
  let url = 'http://colormind.io/api/';
  let postData = {'model':'default'}
  httpPost(url, 'json', postData);
}

function draw() {
  background(220);
  //nothing here yet
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 12, 2021, 10:13pm UTC](https://discourse.processing.org/t/api-post-error-not-sure-whats-causing-it/29311/2 "2021-04-12T22:13:51Z")

</div>

Hi,

If I run the code in the [p5 web editor](https://editor.p5js.org/), I get this error :

```auto
TypeError {stack: ""}

```

This is somehow cryptic and I don’t really know what is the formatting behind this.

However the `httpPost` function is using the [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) function [behind the scenes](https://github.com/processing/p5.js/blob/0ee26327802f3afc7b0b2591e6c5667c986d8f21/src/io/files.js#L1104) and I tried running that in a new tab (in Firefox):

```auto
fetch('http://colormind.io/api/', {method: 'POST', body: postData})
     .then(data => data.json())
     .then(json => console.log(json))
     .catch(err => console.log(err));

```

And effectively there’s an error related to [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) :

> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [https://colormind.io/api/](https://colormind.io/api/). (Reason: CORS request did not succeed).

> TypeError: NetworkError when attempting to fetch resource.

This is caused by the fact that the creators of [colormind.io](http://colormind.io) didn’t enabled CORS headers and allowed requests from all origins.

Since fetch is using the Cross-Origin Ressource Sharing policy, you can read more about it here :

> **[Cross-Origin Resource Sharing (CORS) - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)**
>
> Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by...

I also tried the JavaScript example at the end of the [api page](http://colormind.io/api-access/) and it still gives me a CORS error. Most of the time it’s really anoying specially with APIs but it’s meant to be a security layer.

So you can contact the API provider asking them to add the CORS headers.

You can also take a look at that nice article, specially the Solutions section :

> **[A Guide to Solving Those Mystifying CORS Issues](https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues)**
>
> Cross-Origin Resource Sharing is confusing for a software developer. They are security mechanisms built into all browsers and must be fixed in the system.

---

<div class="post-metadata">

**Author:** ![psemme](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/psemme/32/12721_2.png) [@psemme](https://discourse.processing.org/u/psemme)\
**Post date:** [April 12, 2021, 10:45pm UTC](https://discourse.processing.org/t/api-post-error-not-sure-whats-causing-it/29311/3 "2021-04-12T22:45:52Z")

</div>

Hi and thank you!  
Ugh CORS. I should have guessed. I will email them and ask for CORS headers - good suggestion. Thanks a ton for digging into this for me.