如何连接React前端和Express后端？

Question

这是一个关于IT技术的问题：我在使用ReactJS网站时，通过yarn start运行并在localhost:3000上启动。现在我想在同一服务器上启动一个express服务器，并使React服务器在express.js中启动。但是大多数教程都过时了，剩下的则是将React转换为静态网站，然后再使用express。我想保留React在服务器端的优势，以便使用react-router。我已经尝试连接两个服务器，但是expressjs服务器覆盖了create-react-app服务器。我希望能够连接这两个服务器以发送post请求。

- adriam

---

你为什么不能将你的express服务器运行在3001端口，而将react前端运行在3000端口呢？这样做的话，你就可以通过“localhost:3001/users”访问express服务器并发送post请求。 - bluesixty

@bluesixty 如果我把这个放在AWS服务器上会怎样？ - adriam

Answer 1

我最近制作了一个实现此策略的示例存储库。有几种方法可以做到这一点，但最简单的方法是启动express服务器作为第二个服务器，在不同的端口上运行，即3001端口。然后，您可以使用concurrently命令来同时启动react服务器（我假设使用webpack）和express API服务器。 这里是一个教程，展示了如何设置这个环境。您应该关注本教程中有关代理请求的部分（从客户端（浏览器）经过webpack服务器），如果您不通过webpack服务器代理请求，则需要考虑CORS配置问题。 这是我的概念验证repo，其中我实施了您所寻找的内容：react客户端和express服务器。它可以通过concurrently或docker（compose）运行。

- Mikelax

---

只是想说那个教程非常棒，我已经寻找了几天，它运行得非常好，而且回答了OP的问题。 - rrd

很酷，谢谢。我知道在React、Docker、Express和Apollo/GraphQL之间，每个项目都有大量的教程，我想要的是一个将它们结合在一个单一的教程项目中的东西。 - Mikelax

Answer 2

您可以更改Express监听的端口：

var server = app.listen(3001, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("Example app listening at http://%s:%s", host, port)

将3001更改为任何有效的端口号

- Elie Asmar