在两个单独的 Heroku 应用程序上代理 API 从 React 前端到 Flask 后端的请求

Question

我正在开发一个带有 create-react-app 前端和带有 Flask-RESTful 后端的 Flask API 的 Web 应用程序。我在本地构建了该应用程序，它可以在我的计算机上运行，但现在我尝试将其部署到 Heroku 时失败了。

我将 Flask 后端和 React 前端部署为两个不同的 Heroku dyno，因此每个都有自己的 URL。当我转到前端的 URL 时，它似乎工作正常，后端 URL 似乎也工作。但是，该应用程序依赖于 API 对后端的调用，我无法成功向我的后端发送请求。

当我在本地工作时，我会运行使用 gunicorn --bind 0.0.0.0:8000 app:app 命令的 flask 后端和使用 npm start 命令的前端。只要我将 "proxy": "https://localhost:8000" 放入我的前端应用程序的 package.json 文件中，该应用程序就可以很好地处理我的 Axios 函数调用中的相对调用。总的来说，我遵循了这个教程：https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/。

我想我可以简单地编辑 package.json 文件中的 proxy 字段以指向我的后端 Heroku 应用程序的 URL，然后我就不必更改了还要别的吗。但是，当我使用它进行部署时，我发现对我的端点的请求是向 https://my-frontend-app.herokuapp.com/<endpoint> 而不是 https://my-backend-app.herokuapp.com/<endpoint> 发出的。

这是我的 package.json:

{
  "name": "heroku-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.2",
    "plotly.js": "^1.39.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-plotly.js": "^2.2.0",
    "react-scripts": "1.1.4",
    "reactstrap": "^6.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "https://star-employees-api.herokuapp.com"
}

我的请求是这样的：

axios.get('/analyze', data)
.then((response) => {
    // Handle request response here
};

谁能告诉我我做错了什么？这是我第一次部署这样的应用程序并使用 Heroku，所以我不确定我是否偏离了这里。如果有更好的方法来部署这种应用程序，也请告诉我。如果有帮助，我可以提供任何其他代码片段或文件结构，只是不确定目前有什么帮助。提前致谢。

Answer 1

我设法弄明白了。正如 Tholle 提到的，package.json 文件中的代理字段仅适用于开发服务器。如果您将 create-react-app 与 Heroku 和 buildpack, there are some other steps. When deploying, you need to follow the instructions here 一起使用，并在最顶层目录中添加一个 static.json 文件。

在两个单独的 Heroku 应用程序上代理 API 从 React 前端到 Flask 后端的请求

Proxying API request from React frontend to Flask backend on two separate Heroku apps

python

heroku

flask

reactjs

create-react-app