如何在生產環境中的 Reactjs 中配置 COR

Question

將 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

您可以訪問這些 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