如何连接React前端和Express后端? [英] How do I connect a react frontend and express backend?

问题描述

这是我在泡菜中遇到的问题:顺便说一句，我在查找如何通过Google执行此操作时遇到了一些麻烦，我确实尝试使用StackOverflow，但找不到确切答案

So here is my issue in a pickle: btw I had some trouble finding out how to do this through google and I did try using StackOverflow but couldn't find the exact answer

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

So I have a ReactJS website where I use

纱线开始

运行，它将在localhost:3000上启动 我希望它在localhost:3000上启动，而Express服务器也在该服务器上启动，也就是在express.js中启动react服务器.

to run and it launches on localhost:3000 I want it to launch on localhost:3000 while an express server also launches on that server, aka start the react server up in express.js.

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

It seems like every tutorial I've found, most are outdated, and the remaining ones are guides to turn react into a static website and THEN use express. I would like to keep react on the server-side for advantage of react-router

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

So basically when I have an expressjs server THE DATABASE DETAILS HAVE BEEN REMOVED, THAT LINE ISNT AN ERROR

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

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

var mysql = require('mysql'); var连接= mysql.createConnection({host: 数据库:'main'});

var mysql = require('mysql'); var connection = mysql.createConnection({ host : database : 'main' });

connection.connect()

connection.connect()

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

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

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

app.listen(3000, function(){ console.log('Express sever is listening on port 3000') })

//connection.end()

//connection.end()

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

I also start the create-react-app server with yarn start and it launches on localhost:3000 but this expressjs server overrides that.

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

So I want to connect the two to be able to send post requests

推荐答案

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

I just recently worked on a sample repo that implements this strategy. There are a few ways this can be done, but the simplest way to do this will be to start the express server as a second server that will run on a different port, ie. 3001. You can then use concurrently to launch both the react server (I am assuming webpack) and the express API server in a single command.

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

Here is a tutorial that shows how this can be set up. You should pay attention to the section in this tutorial about proxying requests from the client (browser) through the webpack server. There are some considerations to think about with regards to CORS configuration if you do not proxy requests through the webpack server.

这是我的概念验证仓库，在这里我实现了您所寻找的东西用于:响应客户端和快递服务器.可以通过并发运行或使用docker(撰写).

Here is my proof of concept repo where I implemented just what you are looking for: react client, and express server. It can be run via concurrently or with docker (compose).

这篇关于如何连接React前端和Express后端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！