Enable CORS in React app

Question

I am setting up a React application that extracts from a public API. When I am testing the API in Postman, it works without problems. But if I use fetch() in my React app, I get a CORS error.

As far as I have understood, my client request should be allowed on the server using headers. But I don't own the server hosting the API, so I cannot do anything on the server. The API is configured to be used by third party applications using an access code, so I am a bit confused why it's not allowed to extract from the API in React.

What are my options?

You most likely have to use your own server as the middle man, so that the browser is only fetching data from the same origin. — Tholle, Jul 07 '18 at 09:56

score 1 · Accepted Answer · answered Jul 07 '18 at 10:08

1

if you don't have server access then you can bypass it

CORS Anywhere: https://cors-anywhere.herokuapp.com/
All Origins: http://allorigins.me/
Any origin: http://anyorigin.com/

answered Jul 07 '18 at 10:08

ehmad11

1,395
3
14
29

score 0 · Answer 2 · answered Jul 07 '18 at 10:11

CORS is a security thing, under most circumstances the best practise would be not to try to allow the client to make callouts to wherever (the old clientside CORS * * * hackaroonie).

Instead, set up a simple serverside relay, as Tholle suggested above a middleman, in the same deployment (same origin).

There's a brief example of how you'd do this here.

Enable CORS in React app

2 Answers2