能否直接连接ReactJs与ExpressJs？如何实现同服务部署及API请求？

一、让Express托管React静态文件 #

要实现同端口服务，核心是把React编译后的静态文件交给Express托管，步骤如下：

1. 先在React项目根目录执行打包命令，生成静态资源文件夹：

   npm run build
   

   执行后会得到build文件夹，里面包含所有编译好的HTML、CSS和JS文件。

2. 在Express项目中配置静态文件托管，同时处理SPA路由：

   const express = require('express');
   const path = require('path');
   const app = express();
   
   // 解析JSON格式的请求体（处理POST/PUT等API请求）
   app.use(express.json());
   
   // 先定义API路由，避免被静态文件路由拦截
   app.get('/api/greet', (req, res) => {
     res.json({ content: 'Hello from Express API!' });
   });
   
   // 托管React静态文件，替换为你实际的build文件夹路径
   app.use(express.static(path.join(__dirname, '../react-project/build')));
   
   // 所有非API请求返回React的index.html，支持SPA路由刷新
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, '../react-project/build', 'index.html'));
   });
   
   const PORT = process.env.PORT || 3000;
   app.listen(PORT, () => {
     console.log(`Server running on port ${PORT}`);
   });
   

   注意：把../react-project/build替换为你本地React项目build文件夹的实际路径，比如Express和React在同一父目录下时可以用这个路径。

二、同端口调用Express API的方法 #

完全可以同端口调用API，因为前端和服务器共享同一个端口，直接用相对路径发起请求即可，无需处理跨域。

前端请求示例（React组件中） #

方式1：使用原生fetch

import { useEffect, useState } from 'react';

function Home() {
  const [apiData, setApiData] = useState('');

  useEffect(() => {
    // 直接用相对路径请求API
    fetch('/api/greet')
      .then(response => response.json())
      .then(data => setApiData(data.content))
      .catch(err => console.error('请求失败:', err));
  }, []);

  return <div>API返回内容：{apiData}</div>;
}

export default Home;

方式2：使用Axios

先安装Axios：

npm install axios

然后在组件中使用：

import { useEffect, useState } from 'react';
import axios from 'axios';

function Home() {
  const [apiData, setApiData] = useState('');

  useEffect(() => {
    axios.get('/api/greet')
      .then(response => setApiData(response.data.content))
      .catch(err => console.error('请求失败:', err));
  }, []);

  return <div>API返回内容：{apiData}</div>;
}

export default Home;

三、关键注意事项 #

• API路由必须放在静态文件托管和SPA fallback路由的前面，否则Express会把API请求识别为前端路由，返回index.html而非API数据。
• 如果React使用了React Router等路由库，必须保留app.get('*', ...)这个路由，否则刷新前端路由页面会出现404。
• 开发阶段如果需要同时使用React的热重载和Express API，可以在React项目的package.json中添加代理配置："proxy": "http://localhost:3001"（假设Express运行在3001端口），这样开发时前端请求/api/xxx会自动转发到Express服务器，生产环境仍使用打包后托管的方式。

内容的提问来源于stack exchange，提问作者TPGlitch