如何在 React 项目中正确集成 Express：前后端分离的完整实践指南-js教程-PHP中文网

如何在 React 项目中正确集成 Express：前后端分离的完整实践指南

react 是纯前端库，无法直接运行 express（node.js 后端框架）；错误源于将服务端代码混入浏览器环境。本文将手把手教你通过目录隔离、独立进程和标准通信方式，安全、可维护地实现 react + express 协同开发。

react 是纯前端库，无法直接运行 express（node.js 后端框架）；错误源于将服务端代码混入浏览器环境。本文将手把手教你通过目录隔离、独立进程和标准通信方式，安全、可维护地实现 react + express 协同开发。

你遇到的这一长串 Module not found: Error: Can't resolve 'fs'、'path'、'crypto' 等报错，并非配置疏漏，而是一个根本性架构误用：你在 React 前端应用（浏览器环境）中，试图直接 require('express')。

这是不可行的——Express 是为 Node.js 运行时设计的服务端框架，它重度依赖 fs、http、path、crypto 等 Node.js 原生模块。而现代 React 项目（无论是 CRA 还是 Vite）默认使用 Webpack 5+ 或 Vite 构建，它们明确移除了对 Node.js 核心模块的自动 polyfill 支持（出于安全与体积考量）。浏览器中根本不存在 fs.readFile() 或 http.createServer()，强行引入只会触发数十个“无法解析”错误。

✅ 正确解法不是“给浏览器加 polyfill”，而是 严格分离前后端职责：

一、项目结构：物理隔离是前提

不要在 src/App.js 或任何 React 组件里写 const express = require('express')。请重构目录如下：

my-react-express-app/
├── frontend/          # React 前端（原 create-react-app 项目）
│   ├── public/
│   ├── src/
│   ├── package.json   # "scripts": { "start": "react-scripts start" }
│   └── ...
├── backend/           # 独立 Express 后端
│   ├── server.js      # 主入口文件
│   ├── package.json   # "scripts": { "dev": "nodemon server.js", "start": "node server.js" }
│   └── ...
└── package.json       # （可选）根目录 workspace 配置（推荐用于 monorepo 管理）

✅ 关键动作：
将原 create-react-app 项目整个移入 frontend/ 文件夹；

在项目根目录新建 backend/，并 cd backend && npm init -y && npm install express；
backend/server.js 示例：
// backend/server.js
const express = require('express');
const app = express();
const PORT = 5000;
app.use(express.json()); app.get('/api/hello', (req, res) => { res.json({ message: 'Hello from Express!' }); });

app.listen(PORT, () => { console.log(✅ Backend running on http://localhost:${PORT}); });

二、启动方式：双进程并行开发

前端：cd frontend && npm start → 默认启动在 http://localhost:3000
后端：cd backend && npm run dev（需先 npm install -D nodemon）→ 运行在 http://localhost:5000

⚠️ 注意跨域问题：React 前端调用 fetch('/api/hello') 会默认请求 http://localhost:3000/api/hello（404），而非你的 Express 服务。解决方案：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

方案 A：前端代理（推荐，零配置）

在 frontend/package.json 中添加：

"proxy": "http://localhost:5000"

之后，在 React 组件中直接调用：

// frontend/src/App.js
useEffect(() => {
  fetch('/api/hello') // 自动代理到 http://localhost:5000/api/hello
    .then(res => res.json())
    .then(data => console.log(data));
}, []);

方案 B：后端启用 CORS（生产就绪）

在 backend/server.js 中安装并使用 cors：

npm install cors

const cors = require('cors');
app.use(cors()); // 允许所有源（开发用）
// 或更安全的配置：
// app.use(cors({ origin: 'http://localhost:3000' }));

三、构建与部署：前后端独立打包

开发阶段：双服务并行，代理/CORS 解决通信；
生产构建：
- cd frontend && npm run build → 生成 frontend/build/ 静态文件；
- 修改 backend/server.js，添加静态托管：
```
const path = require('path');
app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../frontend/build', 'index.html'));
});
```
- cd backend && npm start → Express 同时服务 API + 前端静态资源（单端口，如 :5000）

⚠️ 重要提醒：避开常见陷阱

❌ 不要全局安装 express 或 create-react-app（易版本冲突）；始终使用 npx create-react-app@latest 和 npm install express --save（在 backend 目录内）；
❌ 不要在 frontend/src/ 下安装 express、body-parser 等后端依赖；package.json 的依赖必须严格按环境划分；
✅ 使用 VS Code 多根工作区（Multi-root Workspace）同时打开 frontend/ 和 backend/，提升开发效率；
✅ 新手强烈建议优先选用 Vite + Express 分离模板（npm create vite@latest frontend -- --template react + 手动建 backend），比 CRA 启动更快、配置更透明。