MERN社交应用生产环境无法展示帖子（本地正常）

问题现象 #

本地运行正常的MERN社交应用，部署到服务器后：

• 用户可正常登录、创建帖子（数据已成功存入数据库）
• 动态页无法展示帖子，排查发现GET /api/posts/:id/timeline请求返回的是HTML文档而非预期的帖子JSON数据

核心原因 #

在server.js中存在两处关键代码顺序错误：

1. 生产环境的通配符路由app.get('*')被放在了API路由之前，Express会按从上到下的顺序匹配路由，导致所有GET请求（包括API接口）都被这个通配符路由拦截，直接返回前端的index.html
2. app.listen被放在了API路由注册之前，虽不会直接导致路由失效，但不符合Express应用的标准编写规范

修复方案 #

调整server.js的代码顺序，确保API路由优先匹配，app.listen放在所有配置之后：

const path = require('path');
const express = require('express');
const cors = require('cors');
const fileUpload = require('express-fileupload');
const AuthRoute = require('./routes/AuthRoute.js');
const connectDB = require('./config/db.js');
const colors = require('colors');
const dotenv = require('dotenv');
dotenv.config();

const PostRoute = require('./routes/PostRoute.js');
const UploadRoute = require('./routes/UploadRoute.js');

const PORT = process.env.PORT || 8000;

connectDB();

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cors());

// 1. 优先注册所有API路由
app.use('/api/auth', AuthRoute);
app.use('/api/posts', PostRoute);
app.use('/api/uploadImages', UploadRoute);

// 2. 再配置生产环境静态文件与通配符路由
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../frontend/build')));

  app.get('*', (req, res) =>
    res.sendFile(
      path.resolve(__dirname, '../', 'frontend', 'build', 'index.html')
    )
  );
} else {
  app.get('/', (req, res) => res.send('Please set to production'));
}

// 3. 最后启动服务器
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`.yellow.bold);
});

关键说明 #

• Express路由匹配遵循顺序优先原则，必须让更具体的API路由（如/api/posts/:id/timeline）先于通配符路由*定义，才能保证API请求被正确处理
• app.listen应放在所有中间件、路由注册完成之后，这是Express应用的标准编写方式

内容的提问来源于stack exchange，提问作者Stephen Scott Moore