Как настроить COR в Reactjs в производственной среде

Question

У меня проблема при развертывании приложения реакции на 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.

Я исследовал и добавил proxy в package.json вот так:

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

Но это все равно показывает ошибку, в чем я не прав?

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

Вы можете получить доступ к этим URL для более подробной информации, спасибо.

Answer 1

CORS должен обрабатываться на стороне сервера. Бэкэнд должен отправлять заголовки CORS по запросу OPTIONS.

Далее приведен список заголовков, которые должны возвращаться бэкэндом для включения CORS.

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

Подробнее о CORS от mdn - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS