Cannot fetch the games from RAWG's API. ...has been blocked by CORS policy

React
1

Hi Everyone,

I’m stuck on video: Project- Building a Video Games Discovery App- Fetching the Games.

here’s the error message showed on the browser:
Access to XMLHttpRequest at ‘https://api.rawg.io/api/games?key=ee56abc41bf2421fa1df42aabed3xxxx’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Thank you for your help /\

2

Hi,

I’ve found the problem.

The problem is on my RAWG’s API account, The Number of requests left for the period is -2412.

Note:
I think because I forgot to put dependency when calling useEffect()

3

You can try creating a new account, don’t forget to add the square brackets in useEffect previously.

4

I’m having the same issue, i created a new account but looks like its going the same direction.

Could anyone provide a code snippet of the effect hook usage in this project? Or let me know how/why my app is firing so many requests to the API?

Thanks,
Jim

5

Like mentioned above you may not be passing the square brackets[] as an optional second parameter to your effect hook. If you don’t include that it can run infinitely.

7

in this line?

useEffect( () => {

8

It’ll be something like useEffect(() => {...}, []);

9

yep found it, thanks mate!

1 Like
10

I’ve encountered that CORS error before, and it can be pretty frustrating. Usually, it’s a security feature to protect against unauthorized requests. To fix it, you might need to configure your API to allow requests from your local host. I did that to play the free dominoes game app. Don’t worry; you’ll get past this hiccup and keep building your Video Games Discovery App!

11

You can resolve the CORS issue by setting up a server-side proxy to make the API request or by checking the API documentation for required headers or keys.
Greece Powerball results

12

did you resolve it finally?
i have the same problem.
but on my account i still have 19997 requests left. that is whats written there…

added now also the (still having that many requests left) but its still not working.
so is there anything i can do concerning the client-side?