Axios.post请求成功但.then回调不执行，React+Node+Passport登录问题排查

你遇到的核心问题有两个：

1. 表单提交触发了浏览器默认刷新行为，导致axios异步请求的回调还没执行，页面就已经重载，因此.then内的逻辑完全没有执行机会
2. 未配置跨域凭证传递，就算登录成功后续请求也无法携带session cookie，导致认证状态无法同步

1. 阻止表单默认提交行为 #

修改前端的handleLogin方法，接收事件参数并调用preventDefault()，同时修正错误的异常捕获逻辑、开启跨域凭证传递：

const handleLogin = async(e) => {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();
  axios.post(SERVER_URL + "/login", 
    {"username": username, "password": password},
    // 开启跨域凭证传递，允许发送session cookie
    {withCredentials: true}
  )
  .then(res => {
    console.log(res.data);
    console.log("login successful");
    // 登录成功后更新全局认证状态
    props.onChange();
    // 执行重定向
    navigate('/profile');
  })
  .catch(err => console.log(err?.response?.data || err))
}

2. 配置后端CORS支持凭证 #

如果你的前后端端口不同（跨域场景），需要修改后端CORS配置，不能用通配符*作为允许的源，同时开启允许凭证：

// 以cors中间件为例
const cors = require('cors');
app.use(cors({
  // 填写你的前端实际访问地址，比如http://localhost:3000
  origin: 'http://localhost:3000',
  credentials: true
}));

同时确保express-session中间件的配置在Passport初始化之前。

3. 同步全局认证状态 #

你当前通过isAuthenticated控制页面渲染，登录成功后需要主动更新这个状态的值，而不是等页面刷新再拉取：

• 如果isAuthenticated存在于父组件，调用父组件传递的更新方法
• 如果用了Redux/Context等全局状态管理，调用对应action更新全局认证状态
• 也可以在登录成功后主动调用一次拉取用户信息的接口，同步更新状态

注意：你后端代码里在外层定义的全局username和uid变量是错误用法，会导致多用户登录时数据互相覆盖，建议直接从req.user中获取用户信息，不要用全局变量存储用户状态。

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