Express成功保存MongoDB后无法重定向到React Router根路径求助

你遇到的核心问题是Axios发送的异步AJAX请求不会触发浏览器自动处理后端的重定向响应：

• 当你用Axios发POST请求时，后端返回的res.redirect会被Axios捕获并自动发起后续的GET请求（就是你控制台看到的XHR请求），但这个请求的结果只会回到Axios的回调里，不会触发浏览器的页面跳转。
• 后端res.redirect后的console.log会执行是因为重定向响应本身是正常发送的，只是浏览器没有按你预期的跳转到新页面。

方法1：前后端配合，前端控制跳转（推荐，符合单页应用逻辑） #

前后端分离场景下，路由跳转应该由前端React Router控制，后端只返回注册结果：

后端修改 #

把res.redirect改成返回成功状态的JSON响应：

// Express路由代码
router.post('/api/users/register', async (req, res) => {
  // 完成Passport注册、登录逻辑
  // ...
  // 返回成功响应
  res.status(200).json({ success: true });
  console.log('注册流程完成'); // 这里的日志会正常执行
});

前端修改 #

在Axios的成功回调里，用React Router的useNavigate钩子手动跳转：

// React注册组件内的提交函数
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Register() {
  const navigate = useNavigate();

  const handleSubmit = async (formData) => {
    try {
      const response = await axios.post('http://localhost:5000/api/users/register', formData, {
        withCredentials: true // 如果用session认证，需要带Cookie
      });
      if (response.data.success) {
        navigate('/'); // 跳转到根路径
      }
    } catch (err) {
      console.error('注册失败:', err);
    }
  };

  // ...组件其余代码
}

方法2：用普通表单提交（不推荐，会刷新页面） #

如果一定要让后端控制跳转，可以放弃Axios，用原生HTML表单提交：

// React注册组件内的表单
<form action="http://localhost:5000/api/users/register" method="POST">
  <input type="email" name="email" required />
  <input type="password" name="password" required />
  <button type="submit">注册</button>
</form>

这种方式下，浏览器会直接处理后端的重定向，但会刷新整个页面，不符合单页应用的体验。

如果用Passport的session认证，要确保前后端的跨域Cookie配置正确：

1. Express端CORS配置要允许带凭证：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

2. Axios请求要开启withCredentials: true（如方法1的代码所示），否则前端跳转后会丢失登录状态。

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