部署到Heroku的MERN应用新增路由后出现404错误求助

1. 确认后端路由是否正确挂载到主应用 #

• 检查Express主文件（如server.js/app.js），是否已导入并挂载新增的/search路由模块，示例代码：

  const searchRoutes = require('./routes/search'); // 确保路径与实际文件位置一致
  app.use('/search', searchRoutes); // 按需求挂载路由，避免路径重复
  

• 注意：如果路由文件内的路径是router.get('/', ...)，主文件挂载时用app.use('/search', searchRoutes)即可；若路由文件内是router.get('/search', ...)，主文件需用app.use('/', searchRoutes)，否则会出现/search/search的无效路径。

2. 验证后端路由本身的可用性 #

• 直接用Postman或curl访问后端本地服务的/search接口（如http://localhost:5000/search，需匹配后端实际端口），确认是否能正常返回响应。如果直接访问后端也返回404，说明路由定义或挂载存在问题，与前端无关。
• 检查路由文件中的HTTP方法是否和前端请求一致：比如前端用GET请求，后端不能写成POST路由，否则会因方法不匹配返回404。

3. 检查前端请求路径是否正确 #

• 开发环境下，前端请求需使用相对路径/search，而非带域名的完整路径，示例代码：

  fetch('/search')
    .then(res => res.json())
    .then(data => console.log(data));
  

• 若写成fetch('http://localhost:5000/search')，会导致proxy配置失效，无法正确转发请求。

4. 确认proxy配置是否生效 #

• 检查React的package.json中proxy字段是否正确指向后端本地服务地址，示例：

  "proxy": "http://localhost:5000"
  

• proxy仅在开发环境（NODE_ENV=development）生效，若误启动生产模式前端服务，proxy会失效。
• 修改proxy配置后，必须重启前端开发服务器才能生效。

5. 检查后端环境变量加载情况 #

• 确保后端已通过dotenv包加载.env文件，主文件开头需添加：

  require('dotenv').config();
  

• 可在后端主文件中打印console.log(process.env.NODE_ENV)，确认当前环境确实为development。

6. 排查路由顺序问题 #

• Express路由按匹配顺序执行，若/search路由放在404处理路由之后，会被覆盖，示例：

  // 错误顺序：先定义404，后挂载业务路由
  app.use((req, res) => res.status(404).send('Not Found'));
  app.use('/search', searchRoutes);
  
  // 正确顺序：先挂载所有业务路由，最后处理404
  app.use('/search', searchRoutes);
  app.use((req, res) => res.status(404).send('Not Found'));
  

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