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

问题描述

我正在开发一个带有 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使用命令运行烧瓶后端和前端npm start。只要我将文件放入前端应用程序，该应用程序就可以很好地处理我的 Axios 函数调用中的相关"proxy": "https://localhost:8000"调用package.json。一般来说，我遵循本教程：https ://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ 。

我想我可以简单地编辑文件中的proxy字段package.json以指向我的后端 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，所以我不确定我是否离这里很远。如果有更好的方法来部署这种应用程序，也请告诉我。如果有帮助，我可以提供任何其他代码片段或文件结构，只是不确定此时会有什么帮助。提前致谢。

标签： pythonreactjsherokuflaskcreate-react-app

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

问题描述

解决方案

推荐阅读