Express中如何修改重定向端口以指向React前端端口？

我来帮你搞定这个问题～你的核心困扰在于前后端分离架构下，Express服务器（9000端口）的重定向默认会指向自身端口，而不是React前端所在的3000端口。下面给你两种实用的解决方案，按需选择：

方案一：前端处理重定向（推荐，符合前后端分离架构） #

在前后端分离的场景中，前端路由应该由前端框架（比如React Router）来控制，后端只需要返回认证成功/失败的状态即可。这样能避免跨端口重定向的问题，也更符合架构设计。

修改Express登录逻辑 #

把原来的res.redirect('/dashboard')改成返回成功响应，比如JSON格式的状态：

router.post("/login", passport.authenticate('local',
{ failureRedirect: '/login',
failureFlash: true }), function(req, res) {
  if (req.body.remember) {
    req.session.cookie.maxAge = 30 * 24 * 60 * 60 * 1000; // Cookie expires after 30 days
  } else {
    req.session.cookie.expires = false; // Cookie expires at end of session
  }
  // 不再后端重定向，返回成功状态
  res.json({ success: true });
});

修改React提交逻辑 #

使用React Router的useNavigate钩子来完成前端跳转：

import { useNavigate } from 'react-router-dom';

// 在组件内部获取navigate实例
const navigate = useNavigate();

const submitForm = async (event) => {
  axios
    .post(
      "http://localhost:9000/login",
      {
        "username": email,
        "password": password,
        "remember": shouldRemember
      },
      // 注意：如果需要保持session，要带上withCredentials
      { withCredentials: true }
    )
    .then((res) => {
      // 前端触发路由跳转
      navigate('/dashboard');
    })
    .catch((err) => {
      console.log(err)
      if(err.response.status === 401){
        setFormError(true)
      }
    });
};

方案二：后端直接重定向到前端完整URL #

如果你坚持要后端完成重定向，不能用相对路径，必须指定前端的完整地址（包含端口）：

修改Express的重定向代码 #

把相对路径改成绝对路径，也可以用环境变量来避免硬编码：

// 可以把前端地址存在环境变量里，方便不同环境切换
const FRONTEND_BASE_URL = process.env.FRONTEND_URL || 'http://localhost:3000';

router.post("/login", passport.authenticate('local',
{ failureRedirect: '/login',
failureFlash: true }), function(req, res) {
  if (req.body.remember) {
    req.session.cookie.maxAge = 30 * 24 * 60 * 60 * 1000; // Cookie expires after 30 days
  } else {
    req.session.cookie.expires = false; // Cookie expires at end of session
  }
  // 重定向到前端的dashboard页面
  res.redirect(`${FRONTEND_BASE_URL}/dashboard`);
});

注意事项 #

这种方式需要确保CORS配置正确，允许携带凭证（因为Passport的session依赖cookie）：

• Express的CORS配置要开启credentials，并指定前端origin：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 你的前端地址
  credentials: true
}));

• React的axios请求要带上withCredentials: true（和方案一的配置一样），否则session cookie不会被传递，前端跳转后可能会失去登录状态。

为什么你之前硬编码端口没成功？ #

大概率是CORS配置的问题：如果没有开启credentials或者origin设置不正确，浏览器会阻止cookie的传递，导致前端跳转后无法识别登录状态，看起来像是重定向没生效。

备注：内容来源于stack exchange，提问作者Amir Rabiee