React中Axios提交成功后未触发.then()回调的问题

问题原因与解决方案 #

1. 表单默认提交行为中断Axios请求 #

你的登录按钮为type="submit"，点击后会触发表单默认提交逻辑，导致页面刷新，Axios请求还未完成就被中断，因此.then回调无法执行。

修复方式：

• 在登录函数中阻止表单默认行为，或把按钮类型改为button。

修改client/components/Login.js的login函数：

const login = (e) => {
    e.preventDefault(); // 阻止表单默认提交
    Axios({
        method: "POST",
        data: {
            username: loginUsername,
            password: loginPassword,
        },
        withCredentials: true,
        url: "http://localhost:4000/login",
    }).then((res) => {
            console.log(res); 
            if(res.status === 200){
                console.log("Successfully logged in");
                navigate('/');
            }else if(res.status === 500){
                console.log("Failed to log in: " +  res.data)
            }
        })
        .catch(err => { // 捕获请求错误，避免静默失败
            console.error("登录请求出错:", err.response?.data || err.message);
        });
};

同时更新按钮的点击绑定（如果保留type="submit"）：

<button style={styles.margins} type="submit" className="btn btn-primary" onClick={login}>Login</button>

或者直接修改按钮类型：

<button style={styles.margins} type="button" className="btn btn-primary" onClick={login}>Login</button>

2. Passport登录路由的回调与重定向冲突 #

你在passport.authenticate中同时配置了successRedirect/failureRedirect和自定义回调，两者存在冲突。自定义回调模式下，Passport不会自动执行重定向，但原有配置会干扰响应返回逻辑，导致前端无法收到正确响应。

修复方式：
移除successRedirect和failureRedirect，完全通过自定义回调处理响应：

app.post('/login', (req, res, next)=>{
    passport.authenticate('local', (err, user, info)=>{
        if(err){
            return res.status(500).json({ error: err.message });
        }
        if(!user){
            return res.status(401).json({ message: info?.message || "账号或密码错误" });
        }
        req.logIn(user, (err)=>{
            if(err){
                return res.status(500).json({ error: err.message });
            }
            return res.status(200).json(user);
        });
    })(req, res, next);
});

3. 额外优化：完善错误处理 #

确保Axios请求添加.catch回调，捕获网络错误或后端返回的异常状态码，避免问题静默发生。

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