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

Question

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

Answer 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 ，但随后反应开发服务器会将其发送到localhost:5000/api/user/123

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