为Create React App设置代理服务器

Question

我已经使用create-react-app启动了一个React应用，并运行npm run eject脚本来获取所有文件的访问权限。之后，我安装了express并创建了一个server.js文件，它与package.json文件位于同一级别。

以下是server.js文件的内容：

const express = require('express');
const app = express;

app.set('port', 3031);

if(process.env.NODE_ENV === 'production') {
  app.use(express.static('build'));
}

app.listen(app.get('port'), () => {
  console.log(`Server started at: http://localhost:${app.get('port')}/`);
})

这里没有什么特别的，只是为未来的API代理设置，我需要使用密钥，但不想暴露我的API。

之后，我在package.json文件中添加了一个"proxy": "http://localhost:3001/"。现在我困在了如何正确启动服务器并在开发模式下使用server.js文件，以及之后在生产环境中使用。

最好能够使用多个代理，例如/api和/api2

- Ilja

Answer 1

您不必强制退出来运行您的server.js。您可以使用node server.js与create-react-app一起运行它。

即使在退出后，您仍然可以使用npm start来启动您的开发服务器。

要运行/api1和/api2，您只需要在server.js文件中处理它，它应该能正常工作。您需要匹配server.js中的port和package.json内的proxy设置中的端口 - 在这种情况下，它应该是"proxy":"http://localhost:3031"。

- jpdelatorre

---

我如何在使用代理的情况下确定请求客户端的IP地址？在Express中，req.ip只会给出本地主机IP。 - stuart

@jpdelatorre，您的回答非常出色和有救世作用。您知道如何在不使用create-react-app的情况下设置相同的选项吗？我的意思是从头开始。 - Mo.

这个解决方案对我仍然不起作用。当我运行npm run start时，它仍然使用React应用程序正在运行的localhost:3000。我知道这个PR有点大，但我已经编辑了package.json以匹配它，就像你在react-ui/package.json下描述的那样 https://github.com/moon-room/log/pull/1您有任何想法我还做错了什么吗？ - Austin Witherow

确保在您的API服务器中有正确的路由。我忘记在“api/auth”前面加上“/”。否则，更改您的“package.json”应该就足够了。 - Philipp Braun

为了在同一个窗口中同时运行服务器和客户端，我建议使用 https://www.npmjs.com/package/concurrently。 - Manticore