如何在生产中将 React 前端连接到 Flask 后端 URL？

Question

我正在托管一个 Flask 后端，该后端部署在例如后端.herokuapp.com/test。我现在正试图让我部署的 React 前端（例如 frontend.herokuapp.com）连接到这个后端：

useEffect(() => {
 fetch("/test", {
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
  },
}).then((response) =>
  response.json().then((data) => {
    setTest(data.tests);
  })
);}, []);

为了开发，我在package.json 中使用了代理：

"proxy": "http://localhost:5000"

但现在在生产中，我想在没有 localhost 的情况下访问我的后端。我怎样才能做到这一点？我还需要代理吗？因为我的前端现在自动使用请求 URL：frontend.herokuapp.com/test 而不是 backend.herokuapp.com/test。

Answer 1

您需要告诉前端在哪里可以找到您尝试获取的端点，例如（在脏变体中）：

useEffect(() => {
 fetch("https://backend.herokuapp.com/test", {
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
  },
}).then((response) =>
  response.json().then((data) => {
    setTest(data.tests);
  })
);}, []);

理想情况下，您会为您的开发和生产环境使用环境变量（在单独的.env 文件中）。因此，与其在您的 fetch 函数中编写绝对路径，您最终会声明一个 const API_URL=${process.env.REACT_APP_API_URL}，然后在您的 fetch 函数中使用它。

fetch(`${API_URL}/test`, {

因此，您需要确保您的环境选择了正确的环境变量。更多关于how to use environment variables in CRA apps。