将MongoDB从Heroku迁移至本地后Node.js项目JS加载异常求助

算力阿峰

2026-5-9

排查MongoDB迁移后Node.js项目JS资源"Not Found"但已加载的问题

这种情况确实挺诡异——明明网络瀑布流显示JS文件加载完成，但浏览器却报找不到，而且只在迁移MongoDB后出现，大概率是DB变更引发了连锁反应，并非静态资源本身的问题。我整理几个最可能的原因和排查方向：

MongoDB连接阻塞导致服务器未完全就绪
很多开发者会把服务器启动（app.listen()）放在MongoDB连接的then()回调里，一旦本地MongoDB连接失败（比如服务未启动、端口不对、连接字符串写错），服务器就根本没正常启动起来！这时候浏览器看到的"已加载"其实是缓存的旧资源，或者浏览器请求时得到的是系统默认的404页面（但瀑布流可能误显示状态码200）。
赶紧检查你的DB连接代码：
```
// 别这么写——DB连不上，服务器就起不来
mongoose.connect(process.env.MONGO_URI).then(() => {
  app.listen(3000);
});

// 改成这样：先启动服务器，再处理DB连接
app.listen(3000, () => console.log("Server running"));
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log("DB connected"))
  .catch(err => console.error("DB连接失败：", err));
```
同时确认本地MongoDB服务是否在运行，连接字符串是不是mongodb://localhost:27017/你的数据库名，有没有开启认证但没加账号密码。
未处理的DB连接异常打断了静态资源响应
如果你的全局中间件或者某个前置逻辑里有依赖MongoDB的操作（比如全局用户认证、读取系统配置），当DB连不上时，这个逻辑会抛出未处理的异常，导致服务器返回500错误，但响应内容可能是错误页面的HTML。浏览器拿到HTML却当成JS解析，就会报"not found"或者语法错误，而瀑布流只显示状态码200/500，不会告诉你内容不对。
解决办法：
1. 调整中间件顺序，先处理静态资源，再放依赖DB的中间件：
```
// 先让静态资源能正常返回，再处理其他逻辑
app.use(express.static(path.join(__dirname, 'public')));
app.use('/api', require('./routes/api')); // 这个路由才依赖DB
```
2. 加个全局错误捕获中间件，避免异常直接崩掉服务器：
```
app.use((err, req, res, next) => {
  console.error("出现异常：", err.stack);
  res.status(500).send('服务器内部错误');
});
```
环境变量差异导致静态资源路径错误
Heroku上的NODE_ENV默认是production，而本地默认是development，如果你的静态资源配置依赖这个变量（比如生产环境用了build目录，本地没配置），就会导致服务器找不到文件。比如你可能写了：
```
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('build')); // 生产环境用build目录
} else {
  app.use(express.static('public')); // 开发环境用public
}
```
要是本地不小心设了NODE_ENV=production，但又没生成build目录，服务器就会返回404。检查下本地的环境变量，或者直接把静态资源路径写死成正确的目录。
浏览器缓存的误导
有时候瀑布流显示的"已加载"其实是浏览器缓存的Heroku旧资源，当前服务器根本没返回正确的JS。按Ctrl+F5强制刷新，或者在开发者工具里勾选"禁用缓存"，再重新加载页面，看看真实的网络请求状态码和响应内容——如果是404，那就是服务器确实找不到文件；如果是200但内容是HTML，那就是前面说的异常导致的。

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