NodeJS Express同应用部署前后端时API被前端鉴权中间件拦截如何解决

问题根源 #

Express 中间件和路由的执行顺序完全和注册顺序保持一致，你当前优先注册了挂载在根路径/的UI路由，所有发往/api/v1/*的请求会先触发UI的全局鉴权中间件，还没匹配到API路由就被重定向到登录页。

解决方案（按改造成本从低到高排序） #

方案1：调整路由注册顺序（最优，零侵入） #

只要先注册API路由，再注册UI路由即可，/api/v1/*的请求会优先匹配到API路由，不会进入后续UI路由的鉴权逻辑，原有URL结构完全不需要修改：

// 优先挂载API路由
require('./你的API路由文件路径')(app);
// 再挂载UI路由
require('./你的UI路由文件路径')(app);

方案2：在UI鉴权中间件中排除API路径 #

如果不方便调整路由注册顺序，可以直接修改UI的鉴权中间件，跳过所有API路径的校验：

ui.use(function (req, res, next) {
    // 新增：所有/api开头的路径直接跳过UI鉴权
    if (req.originalUrl.startsWith('/api/')) {
        return next();
    }

    console.log(req.originalUrl)
    if (req.originalUrl === '/login' || req.originalUrl === '/register') {
        console.log('public route hit')
        return next();
    }

    if (req.isAuthenticated()) {
        console.log('user is authed')
        return next();
    }
    console.log('re-directing to login')
    return res.redirect('/login');
});

方案3：给UI路由加统一前缀（适合长期维护的项目） #

就是你提到的把UI路由统一挂载到/app等独立路径下，实现前后端路径完全隔离，后续不会再出现路径冲突问题：

1. 修改UI路由的挂载配置：

// 原挂载逻辑 app.use('/', ui) 替换为
app.use('/app', ui);

2. 单独处理根路径跳转逻辑，放在所有路由注册之前：

app.get('/', (req, res) => {
    res.redirect('/app/dashboard');
});

调整后UI页面路径为/app/dashboard、/app/login等，和/api/v1/*的接口路径完全区分。

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