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

Posted 2023-03-04

【中文标题】如何在生产环境中在 Reactjs 中配置 COR

【英文标题】：How to config CORs in Reactjs on Production environment

【发布时间】：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)的可能重复

【参考方案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 的更多信息