如何在生产环境中在 Reactjs 中配置 COR答案

【问题标题】：How to config CORs in Reactjs on Production environment如何在生产环境中在 Reactjs 中配置 COR
【发布时间】：2019-04-09 11:37:15
【问题描述】：

我在将 react 应用部署到 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.

我已经研究并在package.json 中添加了proxy，如下所示：

"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

您可以访问这些网址了解更多详情，谢谢。

【问题讨论】：

'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)的可能重复

标签： javascript reactjs heroku

【解决方案1】：

CORS 必须在后端处理。后端必须在 OPTIONS 请求上发送 CORS 标头。

以下是后端需要返回以启用 CORS 的标头列表。

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

从 mdn - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 阅读有关 CORS 的更多信息

【讨论】：