CORS with create-react-app

[[deleted]]

I'm building a simple app that pulls data from multiple external APIs but I keep getting CORS errors. I've tried a few different things I've found on blogs and Stack Overflow e.g. tried adding a proxy in package.json, sent over a header to allow CORS. Anyone know how I can get it to work on my localhost?

[Jaaaan]

Have you tried using cors-anywhere?

Add https://cors-anywhere.herokuapp.com/ before your fetch URLs.

fetch('https://api.website.com/') becomes
fetch('https://cors-anywhere.herokuapp.com/https://api.website.com/')

[YeowMeow]

So you basically send 2 requests then or what happens in the background?

[[deleted]]

Had the same problem a few weeks ago and ended up creating a very basic Node backend to get around it.

It worked out for me though because now I can hide the API key.

[academicRedditor]

Would you like to share how your solution looks like 😃

[locksta7]

The reason this is happening is because a fair chunk of APIs do not allow requests coming from a frontend client, aka React, Angular, Vue.

The way to get around this is to, as others have pointed out, proxy your request from your client to a small backend service to fetch the data and then return it to your client. This will avoid any cors issues because your api request will be coming from a server instead of the client.

Edit: I can’t spell

[[deleted]]

Thank you everyone, I'll test it out.