如何连接react前端和express后端？

Question

所以我的问题就在这里：顺便说一句，我在通过谷歌找到如何做到这一点时遇到了一些困难，我尝试使用StackOverflow，但找不到确切的答案

纱线启动

要在localhost:3000上运行并启动，我希望它在localhost:3000上启动，同时在该服务器上启动express服务器，也就是在express.js中启动react服务器。

似乎我找到的每一个教程，大多数都过时了，剩下的是将反应变成静态网站然后使用Express的指南。我想保持反应在服务器端的反应路由器的优势

Edit1：所以基本上，当我有一个expressjs服务器时，数据库详细信息已经被删除，这一行不是错误

const express=require（'express'）；var-app=express（）；

var mysql=require（'mysql'）；var connection=mysql.createConnection（{host:database:'main'}）；

connection.connect（）

app.post（/用户，函数（req， res）{var user=req.body；res.end（成功）；}）

app.listen（3000，函数（）{console.log（'Express sever正在监听端口3000'）}）

//connection.end（）

我还使用Thread start启动create react应用程序服务器，它在localhost:3000上启动，但这个expressjs服务器会覆盖它。

所以我想把两者连接起来，以便能够发送帖子请求

Answer 1

您可以更改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更改为任何有效的端口号

Answer 2

我最近刚刚做了一个实施这一策略的回购示例。有几种方法可以做到这一点，但最简单的方法是将express server作为第二台服务器启动，该服务器将在不同的端口（即3001）上运行。然后，您可以使用一个命令同时启动react服务器（我假设是webpack）和expressapi服务器。

这里有一个教程，展示了如何设置。您应该注意本教程中关于通过webpack服务器代理来自客户端（浏览器）的请求的部分。如果您不通过webpack服务器代理请求，那么在CORS配置方面需要考虑一些注意事项。

这是我的概念验证repo，在这里我实现了您想要的：react客户端和express服务器。它可以通过并发或与docker（compose）一起运行。