Express路由冲突：服务AngularJS内容与API访问互斥问题求助

问题根源：Express路由匹配的顺序优先级 #

兄弟，这个问题我之前踩过一模一样的坑！核心原因就是Express的路由是按定义顺序从上到下匹配的——一旦某个路由规则匹配成功，就会直接处理请求，不会再往下找后续规则。你之前的两种情况都是因为路由顺序搞反了：

• 注释兜底路由时：前端的SPA路由（比如/home）不是静态资源，也没有对应的API路由，所以Express返回404，自然加载不了AngularJS内容；
• 启用兜底路由时：*会匹配所有请求，包括你的API请求，直接返回前端的index.html，所以API请求看起来是200，但内容是前端页面，根本没命中你的API端点。

正确的路由配置顺序 #

解决方法很简单，按以下顺序配置路由即可：

1. 先挂载所有API路由 #

把你的所有API端点放在最前面，确保所有/api（或其他API前缀）开头的请求优先被处理。比如：

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

// 先加载API路由（假设你的API路由文件在./routes/api.js）
const apiRouter = require('./routes/api');
app.use('/api', apiRouter);

// 这里可以加其他中间件，比如body-parser、cors等
app.use(express.json());

2. 然后托管前端静态资源 #

用express.static托管你的AngularJS dist文件夹，确保所有静态资源（js、css、图片等）能被正确访问：

// 托管dist文件夹的静态资源，注意用path模块处理路径避免相对路径问题
app.use(express.static(path.join(__dirname, '../dist')));

3. 最后添加SPA兜底路由 #

只有当请求既不是API也不是静态资源时，才返回前端的index.html，让AngularJS的前端路由来处理：

// 兜底路由，处理所有非API、非静态资源的请求
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../dist/index.html'));
});

// 启动服务
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

额外注意事项 #

• AngularJS的html5Mode配置：如果你的前端用了HTML5模式的路由，记得在AngularJS里开启：

  angular.module('yourApp', [])
    .config(['$locationProvider', function($locationProvider) {
      $locationProvider.html5Mode(true);
    }]);
  

  同时在dist/index.html的<head>里添加<base href="/">，避免路由路径出错。
• 路径检查：确保../dist的路径是正确的，用path.resolve(__dirname, '../dist')可以避免因为当前工作目录不同导致的路径问题。
• API前缀隔离：尽量给API加上统一前缀（比如/api），避免和前端路由路径冲突，这也是前后端分离的最佳实践。

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