create-react-app 的 package.json 中的“代理”字段如何工作？答案

【问题标题】：How does the "proxy" field in a create-react-app's package.json work?create-react-app 的 package.json 中的“代理”字段如何工作？
【发布时间】：2020-09-27 09:30:22
【问题描述】：

我有一个在 http://localhost:4050 运行的 NodeJS 后端，并且我已将我的 react 应用程序配置为在那里进行 API 调用。为了在 heroku 上进行部署，我必须将后端的 PORT 变量更改为 process.env.PORT。结果，当我将 react 应用程序的 build 文件夹放在后端的 server 文件夹中时，当我部署到 heroku 时，react 应用程序仍在搜索 localhost:4050 并且自然无法进行调用，因为 heroku 在任意不同的端口。但显然在package.json 文件中添加与"proxy":"http://localhost:4050" 相同的http://localhost:4050 是有效的。我真的很好奇如何做到这一点。

【问题讨论】：

标签： node.js reactjs express heroku

【解决方案1】：

package.json 中的proxy 字段用于代理从前端域到后端的所有请求。例如，您有：

后端（REST API）：localhost:5000/api/user/:id
前端（React.JS 应用程序）：localhost:3000/user

如果你调用axios.get('/api/user/123')，浏览器会发送这个请求到localhost:3000/api/user/123，但是react dev server会向localhost:5000/api/user/123发送请求

请注意，这仅适用于开发环境。如果你想部署你的 React.JS，有一个更好的方法：https://blog.heroku.com/deploying-react-with-zero-configuration

【讨论】：

我正在尝试使用build/ 文件夹（来自npm run build），将其放入后端服务器文件夹，然后将后端部署到heroku。在这种情况下，我将如何配置 react 应用程序（在构建版本之前）以调用后端的确切端口，直到部署它之后我才知道。
@InfinityIntellect 只使用没有协议、主机和端口的路径？ /api/user/123