MERN项目登录页Axios POST请求pending(204)预请求问题如何解决？

核心问题定位 #

• 前后端请求端口不匹配：前端Axios请求地址为http://localhost:8000/login，但后端默认监听端口是9000
• 后端登录路由存在语法错误：User.findOne的回调函数被错误放在方法参数外，导致查询完成后没有给前端返回任何响应，请求自然一直处于pending状态
• 缺少请求错误捕获逻辑：前端Axios请求没有添加catch回调，异常场景下无法定位报错

修复步骤 #

1. 统一前后端端口 #

二选一即可：

• 前端Login.js中修改请求地址为http://localhost:9000/login
• 后端Index.js中修改PORT定义为const PORT = process.env.PORT || 8000;

2. 修复后端登录路由语法错误 #

将原login路由的代码替换为以下内容，修正findOne的参数嵌套错误：

//Routes
app.post("/login",(req,res)=>{
    const { Userid, Password } = req.body;
    console.log("Requested body",req.body);
    User.findOne({Userid}, (err,user) =>{             
        if(err) {
            return res.status(500).json({message:"服务器查询错误"})
        }
        if(user){
            if(Password === user.Password){
                res.status(200).json({message:"登录成功", user: user});
            }else{
                res.status(400).json({message:"密码错误"});
            }
        }else{
           res.status(403).json({message:"用户未注册"}) 
        }
    })
})

3. 补充前端请求错误捕获 #

修改Login.js中的login方法，添加catch回调：

const login = () => {
     axios.post("http://localhost:9000/login",user)
    .then(res => console.log(res))
    .catch(err => console.log("请求错误：", err))
}

可选优化项 #

• 移除后端冗余的预检配置：app.options('*', cors()); 这行可以删掉，app.use(cors())已经默认处理了预检请求
• 给express.urlencoded添加配置避免警告：app.use(express.urlencoded({extended: true}))
• 生产环境不要明文存储密码，建议使用bcrypt加密后再存到数据库

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