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

【问题标题】：How do I connect a react frontend and express backend?如何连接 React 前端和 Express 后端？
【发布时间】：2018-05-16 16:56:09
【问题描述】：

所以这是我在泡菜中遇到的问题：顺便说一句，我在通过谷歌找到如何做到这一点时遇到了一些麻烦，我确实尝试使用 StackOverflow，但找不到确切的答案

所以我有一个使用 ReactJS 的网站

纱线开始

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

似乎我找到的每个教程，大多数都已过时，其余的都是将 react 变成静态网站然后使用 express 的指南。我想继续在服务器端做出反应以利用反应路由器

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

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

var mysql = require('mysql'); var 连接 = mysql.createConnection({ 主机：数据库：'main' });

connection.connect()

app.post('/users', function(req, res) { var user = req.body; res.end('成功'); })

app.listen(3000, function(){ console.log('Express服务器正在监听在端口 3000') })

//connection.end()

我还使用 yarn start 启动了 create-react-app 服务器，它在 localhost:3000 上启动，但是这个 expressjs 服务器覆盖了它。

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

【问题讨论】：

有什么原因你不能在 3001 端口上运行你的 express 服务器和在 3000 端口上运行 react 前端？这样做你可以通过“localhost:3001/users”访问express服务器来发送post请求。
@bluesixty 如果我把它放在 AWS 服务器上会怎样？

标签： reactjs express

【解决方案1】：

我最近刚刚研究了一个实施此策略的示例存储库。有几种方法可以做到这一点，但最简单的方法是启动 express 服务器作为将在不同端口上运行的第二个服务器，即。 3001. 然后您可以使用concurrently 在单个命令中启动反应服务器（我假设是 webpack）和 express API 服务器。

Here is a tutorial 显示了如何设置。您应该注意本教程中有关通过 webpack 服务器代理来自客户端（浏览器）的请求的部分。如果您不通过 webpack 服务器代理请求，则需要考虑有关 CORS 配置的一些注意事项。

Here is my proof of concept repo 我实现了您正在寻找的东西：反应客户端和快速服务器。它可以是 run via concurrently 或使用 docker (compose)。

【讨论】：

只想说那个教程很棒，找了几天，效果很好，回答了OP。
酷，谢谢。我知道在 react、docker、express 和 apollo/graphql 之间，每一个都是包含大量教程的大型项目，我想要在一个教程项目中将它们全部联系在一起。

【解决方案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 更改为任何有效的端口号

【讨论】：