Getting CORS Error when using fetch to get data

Question

I am trying to access the API to get some data however i keep getting this CORS error. I have checked my code for any syntax errors but i can't find any. I have attached a picture of the error and my function which is supposed to get the data.

async function getData(){
  const request = await fetch('https://api.igdb.com/v4/games', {
    method: 'POST',
    headers: {
    'Client-ID': 'jglmao8u28qo1p9wltqne325i7xh3u',
    'Authorization': 'Bearer 4xau27m6liukizor4z2l8mlb7vbpjk',
  }
  })
  const response = await request.json();
  console.log(response);
}

You may want to consider not providing your client ID and bearer token to the world. — Dave Newton, May 02 '22 at 15:39
It is fine i will generate a new one once my problem is solved. — CodeItNow, May 02 '22 at 15:43
There is a section in the API documentation of IGDB about CORS. https://api-docs.igdb.com/#cors For a better understanding of why this is happening I suggest checking out [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/q/35553500/3982562) which has an excellent answer that explains the issue using an example scenario. — 3limin4t0r, May 02 '22 at 15:45

score -3 · Accepted Answer · answered May 02 '22 at 15:28

-3

There is a great proxy out there used just for this - bypassing a CORS block. The source code is here: https://github.com/Rob--W/cors-anywhere, and you would use it like this:

https://cors-anywhere.herokuapp.com/https://api.igdb.com/v4/games basically just adding the CORS-Anywhere URL before your actual image URL.

In your situation, it would be

async function getData(){
  const request = await fetch('https://cors-anywhere.herokuapp.com/https://api.igdb.com/v4/games', {
    method: 'POST',
    headers: {
    'Client-ID': 'jglmao8u28qo1p9wltqne325i7xh3u',
    'Authorization': 'Bearer 4xau27m6liukizor4z2l8mlb7vbpjk',
  }
  })
  const response = await request.json();
  console.log(response);
}

If you get rate limited by that website, try https://circumvent-cors.herokuapp.com/, this is one that I have deployed from the GitHub source code, no modifications and I do not think it should rate limit you.

Cheers, and let me know if this works.

answered May 02 '22 at 15:28

Pufferfishe

139
1
7

Thanks for the reply but i am getting this error now POST https://cors-anywhere.herokuapp.com/https://api.igdb.com/v4/games 403 (Forbidden) – CodeItNow May 02 '22 at 15:37
try `https://circumvent-cors.herokuapp.com/https://api.igdb.com/v4/games` – Pufferfishe May 02 '22 at 15:50
That seemed to have worked however i am getting an empty array for some reason. I might need to check the docs to see correct endpoints. – CodeItNow May 02 '22 at 15:53
Your solution has fixed the problem. The reason i was getting an empty array was because i had to specify the data i needed in the body. This is my first time i have come across such an API where you need to do that. It is for sure different from other APIs that i have used. Anyways thank you for the solution. – CodeItNow May 02 '22 at 16:11

Getting CORS Error when using fetch to get data

1 Answers1