本文将指导开发者如何在不使用Next.js的情况下，将React前端应用与Express.js后端API整合到同一个URL和端口下。通过配置Express服务器来同时提供React的静态文件和API服务，并在开发环境中利用代理解决跨域问题，从而实现前端和后端在同一地址下的无缝协作，简化开发和部署流程。
在现代Web开发中，拥有统一的URL结构，即前端应用和后端API共享同一域名和端口，能够简化部署、避免跨域问题，并提升用户体验。Next.js等框架通过其内置的API路由功能天然支持这一点。然而，对于纯React应用结合Express.js后端，我们同样可以实现这种效果。本文将详细阐述如何在开发和生产环境中配置，使React前端和Express后端运行在同一个URL下。
核心概念：静态文件服务与API路由
React应用在构建后会生成一系列静态文件（HTML, CSS, JavaScript等）。这些文件需要一个Web服务器来提供服务。Express.js作为一个强大的Node.js框架，不仅可以构建RESTful API，也完全能够充当静态文件服务器。其核心思想是让Express服务器同时处理对静态文件的请求（通常是根路径/）和对API路由的请求（例如/api/*）。
生产环境配置
在生产环境中，React应用通常会被构建成静态文件，然后由一个Web服务器（如Nginx, Apache, 或本文介绍的Express）来提供服务。Express服务器可以直接监听一个端口，并将对根路径的请求映射到React的构建输出目录，同时处理所有API请求。
步骤：
构建React应用： 首先，确保你的React应用已经通过 npm run build 或 yarn build 命令进行了构建。这会在你的项目根目录下生成一个 build 文件夹（或 dist，具体取决于你的配置），其中包含了所有生产环境所需的静态文件。
-
配置Express服务器： 创建一个Express应用，使其能够：
- 服务React的静态文件。
- 定义和处理API路由。
以下是一个基本的Express服务器配置示例：
const express = require('express'); const path = require('path'); // 引入path模块用于处理文件路径 const app = express(); const port = process.env.PORT || 3000; // 生产环境通常使用环境变量PORT，否则默认为3000 // 1. 服务React应用的静态文件 // 'build' 目录是React应用构建后的输出目录 app.use(express.static(path.join(__dirname, 'build'))); // 2. 定义API路由 app.get('/api/hello', (req, res) => { res.json({ message: 'Hello from Express API!' }); }); // 3. 对于所有未匹配的路由，返回React应用的index.html // 这是为了支持React路由（如React Router）在客户端进行路由跳转 app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); // 启动服务器 app.listen(port, () => { console.log(`Server listening on port ${port}`); });代码说明：
- app.use(express.static(path.join(__dirname, 'build')));：这行代码告诉Express将 build 目录下的文件作为静态资源提供。当浏览器请求 / 路径时，Express会尝试在 build 目录中查找 index.html 并返回。
- app.get('/api/hello', ...);：这是一个典型的API路由定义，当请求 /api/hello 时，服务器会返回一个JSON响应。
- app.get('*', ...);：这是一个“万能”路由，它会捕获所有未被前面路由（包括静态文件和API路由）匹配到的请求。这对于单页应用（SPA）非常重要，它确保了无论用户直接访问哪个前端路由路径（例如 /about），服务器都会返回 index.html，然后由React Router等客户端路由库来处理实际的页面渲染。
部署注意事项： 在生产环境中，部署时通常不需要显式指定端口，因为云服务提供商或容器平台会通过环境变量（如 PORT）来指定应用监听的端口，或者通过反向代理（如Nginx）将外部请求转发到应用的内部端口。
开发环境配置
在开发环境中，我们通常会运行React的开发服务器（例如Create React App的 react-scripts start），它通常监听一个端口（如3000），并提供热重载等功能。同时，我们的Express后端服务器可能运行在另一个端口（如3001）。为了避免跨域问题，并模拟生产环境的统一URL结构，我们可以使用代理（Proxy）。
步骤：
-
运行Express后端服务器： 确保你的Express后端服务器正在运行，例如监听在 http://localhost:3001。
// server.js (或你的后端入口文件) const express = require('express'); const app = express(); const port = 3001; // Express后端监听的端口 app.get('/api/hello', (req, res) => { res.json({ message: 'Hello from Express API (dev)!' }); }); app.listen(port, () => { console.log(`Express API listening on port ${port}`); }); -
配置React开发服务器代理： 对于使用Create React App创建的项目，可以在 package.json 文件中添加一个 proxy 字段，指向你的后端服务器地址。
// package.json { "name": "my-react-app", "version": "0.1.0", "private": true, "dependencies": { // ...你的依赖 }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "proxy": "http://localhost:3001" // 添加此行 }代理工作原理： 当你在React应用中发起一个请求，例如 fetch('/api/hello')，并且该请求不是静态资源文件（如 /logo.svg）时，Create React App的开发服务器会检测到这个请求，并将其转发到 package.json 中 proxy 字段指定的地址（即 http://localhost:3001）。这样，你的React应用就可以像访问同源API一样访问后端API，而无需担心跨域问题。
注意事项：
- 代理只在开发环境有效。
- 如果你需要更复杂的代理配置（例如，代理多个后端服务，或者需要自定义代理行为），你可能需要使用 http-proxy-middleware 这样的库来手动配置代理。在Create React App中，你可以在 src/setupProxy.js 文件中进行配置。
总结
通过上述配置，我们成功地实现了在React应用中与Next.js类似的统一API路由：
- 生产环境： 一个Express服务器同时负责提供React应用的静态文件和处理所有API请求，两者共享同一个端口。
- 开发环境： React开发服务器通过配置代理，将API请求转发到独立的Express后端服务器，模拟了同源访问，避免了跨域问题。
这种方法为纯React和Express应用提供了一个清晰、高效的集成方案，使得开发流程更加顺畅，部署更加简化。理解并掌握这种集成方式，对于构建复杂的单页应用至关重要。
