Question

将React App部署到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必须在后端处理。后端必须在OPTIONS请求中发送CORS标头。

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

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

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

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

1 个答案: