React+Express/Node项目localhost:3000显示Index of/而非API数据求助

出现"Index of/"文件夹列表，说明你的Express服务器当前在提供静态文件目录的索引，而没有处理你的API请求。以下是具体排查和解决步骤：

1. 调整Express路由顺序 #

Express路由按匹配顺序执行，必须先定义API路由，再设置静态文件服务。如果静态文件服务代码放在API路由前面，服务器会优先返回静态目录内容，跳过API逻辑。

错误示例：

// 错误：静态服务拦截了API请求
app.use(express.static(__dirname));

app.get('/api/data', (req, res) => {
  res.json({ message: '预期的API数据' });
});

正确示例：

// 正确：先处理API请求
app.get('/api/data', (req, res) => {
  res.json({ message: '预期的API数据' });
});

// 再配置静态文件服务（针对React构建产物）
const path = require('path');
app.use(express.static(path.join(__dirname, '../client/build')));

2. 修正静态文件服务路径 #

如果是为React生产构建文件提供静态服务，确保express.static指向的是React项目的build目录（执行npm run build后生成），而非项目根目录。指向根目录会导致服务器遍历并显示所有文件文件夹。

正确配置示例：

const path = require('path');
// 指向React构建后的静态资源目录
app.use(express.static(path.join(__dirname, '../client/build')));

3. 确认启动的是Express服务器 #

如果你用http-server、serve这类工具启动服务，而非运行Express服务器文件（如node server.js），就会直接显示目录列表。确保启动命令正确：

node server.js
# 开发环境可使用nodemon自动重启
nodemon server.js

4. 配置兜底路由（可选） #

如果希望根路径localhost:3000加载React应用而非目录列表，可添加兜底路由：

// 所有非API请求返回React的index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build/index.html'));
});

此时访问根路径会加载React应用，访问localhost:3000/api/data会返回API数据。

内容的提问来源于stack exchange，提问作者Sitala devi dasi