如何解决Express后端重定向指向前端端口而非后端端口的问题

问题原因分析 #

1. 前端请求未触发代理：当前Axios请求的是/login，但代理配置仅匹配/api开头的路径，导致请求直接发送到前端9999端口，未转发至后端7890。
2. 后端重定向逻辑不适用于AJAX场景：Passport的successRedirect/failureRedirect会返回302重定向，浏览器会直接以当前页面域名（前端9999）请求/loginSuccess/loginError，但前端无对应路由，引发404。

解决方案 #

第一步：修正前端Axios请求路径，让请求走代理

修改登录请求的URL，添加/api前缀以触发代理规则，确保请求转发至后端：

this.$axios.post('/api/login', {
  username: this.username,
  password: this.password
}).then((response) => {
  if (response.data.code === 200) {
    this.$store.commit('login', response.data.result);
    this.$router.push({ path: '/' });
  } else {
    // 处理登录失败逻辑
    console.error(response.data.message);
  }
}).catch(err => {
  console.error('登录请求失败', err);
});

第二步：修改后端Passport逻辑，返回JSON而非重定向

前后端分离场景下，AJAX请求无需重定向，应直接返回JSON结果。改用Passport自定义回调函数替代重定向配置：

app.post('/login', (req, res, next) => {
  passport.authenticate('local', (err, user, info) => {
    if (err) {
      return res.send(responseToJson(500, null, '服务器内部错误'));
    }
    if (!user) {
      // 返回登录失败信息
      return res.send(responseToJson(500, null, 'ユーザーまたはパスワードが正しくありません.....'));
    }
    // 执行登录操作并返回用户信息
    req.logIn(user, (err) => {
      if (err) {
        return res.send(responseToJson(500, null, '登录失败'));
      }
      return res.send(responseToJson(200, user, 'login successed!'));
    });
  })(req, res, next);
});

// 可删除原有的/loginSuccess和/loginError路由，不再需要

补充说明 #

• 现有代理配置无需修改，/api前缀会被pathRewrite替换为/，最终转发至后端的/login接口。
• 该方案让前后端通过JSON数据交互，前端完全控制页面跳转逻辑，符合前后端分离的设计原则，彻底避免跨端口跳转问题。

内容的提问来源于stack exchange，提问作者Frank.H