如何连接react前端和表达后端?

IT技术 reactjs express
2021-05-10 18:19:07

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

所以我有一个 ReactJS 网站,我在那里使用

纱线开始

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

似乎我找到的每个教程,大多数都过时了,其余的都是将 react 转换为静态网站然后使用 express 的指南。我想继续在服务器端做出react以利用react-router

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

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

var mysql = require('mysql'); var connection = mysql.createConnection({ 主机: 数据库: 'main' });

连接.connect()

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

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

//connection.end()

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

所以我想将两者连接起来才能发送post请求

2个回答

我最近刚刚研究了一个实现这个策略的示例存储库。有几种方法可以做到这一点,但最简单的方法是将 express 服务器作为第二个服务器启动,该服务器将在不同的端口上运行,即。3001. 然后,您可以在单个命令中同时使用来启动react服务器(我假设是 webpack)和快速 API 服务器。

这是一个教程,展示了如何设置。您应该注意本教程中关于通过 webpack 服务器代理来自客户端(浏览器)的请求的部分。如果您不通过 webpack 服务器代理请求,则需要考虑有关 CORS 配置的一些注意事项。

这是我的概念证明 repo,我在其中实现了您正在寻找的内容:react客户端和快速服务器。它可以通过并发运行或与 docker (compose)一起运行

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