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?

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?

• javascript
• reactjs
• rest
• cors

• 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 Commented Jul 7, 2018 at 9:56
• what cors error is it so we cans set the correct headers? – Joe Warner Commented Jul 7, 2018 at 10:12

2 Answers 2

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

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

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.