How to config CORs in Reactjs on Production environment

Question

I have a problem when I deploy react app to Heroku:

Access to fetch at 'https://rs-yoga-prod.herokuapp.com/' from origin 'https://rs-react-prod.herokuapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://rs-react-prod.herokuapp.com/' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I've researched and added proxy in package.json like this:

"proxy": {
    "dev": { "target": "http://localhost:4000"},
    "prod": { "target": "https://rs-yoga-prod.herokuapp.com" }
}

But it still show error, what did I'm wrong ?

server URL: https://rs-yoga-prod.herokuapp.com
client URL: https://rs-react-prod.herokuapp.com

You can access these URL for more detail, thanks.

Possible duplicate of ['Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)](https://stackoverflow.com/questions/41497674/access-control-allow-origin-issue-when-api-call-made-from-react-isomorphic-ap) — Yura, Nov 06 '18 at 04:38

score 1 · Answer 1 · answered Nov 06 '18 at 04:40

CORS has to be handled at the backend side. Backend has to send CORS headers on the OPTIONS request.

Follow are the list of headers need to return by backend for enabling CORS.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET , DELETE , PUT , OPTIONS
Access-Control-Allow-Headers: Content-Type

Read more about CORS from mdn - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

How to config CORs in Reactjs on Production environment

1 Answers1