如何将ReactJS前端项目与NodeJS后端连接并解决cannot GET /报错

核心问题排查 #

你给出的server.js存在以下几个直接导致cannot GET /报错的问题：

• 缺失express实例初始化代码：没有声明const app = express()，所有app.use调用全部无效
• 缺失服务端口监听逻辑：没有app.listen代码，服务不会正常启动接收请求
• 单页应用路由适配缺失：仅匹配了/路径的请求，且静态资源路径使用相对路径，容易因为执行目录不对导致找不到资源
• CORS配置冗余：已经引入cors包，不需要额外手写跨域响应头中间件

完整修复后代码 #

const express = require('express');
const cors = require('cors');
const path = require('path');

// 初始化express实例
const app = express();
// 定义服务端口，优先读取环境变量配置，默认5000
const PORT = process.env.PORT || 5000;

// 全局中间件配置
app.use(cors());
app.use(express.json({ extended: false }));

if (process.env.NODE_ENV === 'production') {
  // 配置静态资源目录，用绝对路径定位避免执行目录偏差
  app.use(express.static(path.join(__dirname, 'client', 'build')));
  // 所有未匹配到后端接口的请求，统一返回React入口文件，适配前端路由
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
  });
}

// 启动服务监听
app.listen(PORT, () => {
  console.log(`服务已正常启动，访问地址：http://localhost:${PORT}`);
});

验证运行步骤 #

• 确认目录结构：Node服务根目录下放置client文件夹，client为你的React项目根目录，React执行构建后client/build目录存在且包含index.html文件
• 依赖安装：根目录执行npm install express cors，进入client目录执行npm install && npm run build完成React生产构建
• 启动服务：生产环境先配置NODE_ENV=production环境变量，再执行node server.js，访问控制台输出的地址即可正常访问前端页面

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