I encounter a CORS error when using the Tatum IPFS API

Question

I have an NFT platform where I am using tatum to upload NFT image and metadata to IPFS. However, I get a CORS error.

I am using the following API:

const form = new FormData();
form.append("file", "[object Object]");

const resp = await fetch(
  `https://api-eu1.tatum.io/v3/ipfs`,
  {
    method: 'POST',
    headers: {
      'x-api-key': 'My-API'
    },
    body: form
  }
);

const data = await resp.text();
console.log(data);

I was using it previously without errors in the react app. But all of a sudden I am getting the following error:

Access to fetch at 'https://api-eu1.tatum.io/v3/ipfs' from origin 'reactapp.com' has been blocked by CORS policy: Request header field x-api-key is not allowed by Access-Control-Allow-Headers in preflight response.

I am able to make the same API call using the same x-api-key in postman. But it has stopped working in my react app. any ways to fix this?

Answer 1

Postman doesn't care about CORS, so Postman requests will go through without any problems. Unfortunately browsers are a bit different and if you don't have access to the server (to configure CORS there), there is nothing you can do except try to proxy the request through a proxy server.