React登录组件报Axios网络错误 同逻辑注册组件运行正常

你这个AxiosError: Network Error和前端Axios没有关系，根因是登录接口的后端代码逻辑错误：异步逻辑乱序+重复返回响应导致请求连接被异常强制断开，浏览器判定为网络错误。Postman能正常返回是因为它对服务端不规范响应的容错度远高于浏览器，不代表接口逻辑没问题。

后端登录接口的具体错误 #

• 异步执行顺序完全混乱：你写的checkPassword里虽然await了数据库查询，但后面判断accountMatched、调用res.end()的代码不会等查询结果返回，数据库还没查到用户，你就提前把响应连接关了。
• 重复发送响应触发服务端报错：
  • res.sendStatus()本身就会自动结束响应，你后面又手动调用res.end()，会触发Express经典的Cannot set headers after they are sent错误，直接掐断连接。
  • 密码不匹配分支里你先调用res.sendStatus(404)，后面逻辑还会走到res.send('Failed')，同样是重复发送响应。
  • 密码不匹配分支里的err变量根本没定义，会直接抛引用错误；数据库查询走到catch分支时你也没给客户端返回任何响应，会导致请求挂死。

修复方案 #

直接替换掉原来的登录路由代码即可，前端代码和注册组件逻辑一致，不改也能正常运行，顺手提供更规范的前端写法供参考。

修复后的登录后端路由 #

const router = require('express').Router();
let User = require('../db_models/user.model');

router.route('/').get((req, res) => {
    res.sendStatus(200);
})

router.route('/').post(async (req, res) => {
    try {
        const { email, password } = req.body;
        const user = await User.findOne({ email });
        if (!user) {
            return res.status(404).send('用户不存在');
        }
        // 注意：生产环境必须用bcrypt这类库哈希存储密码，严禁明文存储
        if (user.password !== password) {
            return res.status(401).send('密码错误');
        }
        console.log(`登录成功：${user.email}`);
        return res.sendStatus(200);
    } catch (err) {
        console.log('登录接口异常：', err);
        return res.sendStatus(500);
    }
})

module.exports = router;

前端可选优化（不影响问题解决，只是写法更合理） #

你现在混合使用async/await和.then/.catch没有必要，而且axios默认就会自动把JS对象转成JSON字符串，不需要手动调用JSON.stringify：

async postReq() {
    try {
        const res = await axios.post(
            'http://localhost:5000/login', 
            {
                email: this.state.email,
                password: this.state.password
            }, 
            { headers: {'Content-Type':'application/json'} }
        );
        console.log('登录成功', res);
        this.props.redirect('/session');
    } catch (error) {
        console.log('登录失败：', error);
        alert('登录失败，请检查账号密码');
    }
}

安全提示：你现在所有接口都是明文HTTP传输、密码明文存储在数据库，上线前必须配置HTTPS，对密码做加盐哈希处理，否则会有严重的数据泄露风险。

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