Axios Post 登录请求显示待处理状态？

Question

这是 MERN 项目。 我正在努力解决这个问题。 其中包含基本的表单验证和登录向数据库发送请求。 现在一切正常，除了“登录页面的 Axios 发布请求”因为显示状态挂起（204）和发起者的请求是预检。 甚至我通过前端发送的数据（即用户 ID 和密码）也在后端（nodeJS 文件 index.js）正确获取。 在这里，我将分享代码的详细信息以获取更多详细信息。

前端 Reactjs 文件 (Login.js)

import React, { useState } from 'react';
import './login.css';
import axios from 'axios';

const Login = () => {

    const [user,setUser] = useState({
        Userid: "",
        Password: ""
    });

    const handleChange = (e) =>{
        e.preventDefault();
        const {name, value} = e.target;
        setUser({
            ...user,
            [name]:value
        })
    }
    console.log("This is Frontend:-",user);
    const login = () => {
         axios.post("http://localhost:8000/login",user)
        .then(res => console.log(res))
    }

    return (
        <div>
            <div className="login">
            {console.log("USER",user)}
            <h1>TIMESHEET</h1>
            <h2>LOG IN</h2>
            <input type="text" name="Userid" value={user.Userid} placeholder="Enter UserID" onChange={handleChange} />
            <input type="password" name="Password" value={user.Password} placeholder="Enter Password" onChange={handleChange} />
            <div className="button" onClick={login}>Log In</div>
           </div>
        </div>
    )
}

export default Login;

后端节点文件 (Index.js)

require("dotenv").config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const PORT = process.env.PORT || 9000;
// require('./model/userSchema');

const app = express();
app.use(cors()); 
app.options('*', cors()); // this enables preflight
app.use(express.json());
app.use(express.urlencoded());
require('./db/conn')

// const User = require('./model/userSchema');
const userSchema = new mongoose.Schema({
    Userid:String,
    Password:String,
    reEnterPassword:String
});

const User = new mongoose.model("User",userSchema);

//Routes
app.post("/login",(req,res)=>{
    const { Userid, Password } = req.body;
    console.log("Requested body",req.body);
    // console.log("pass:-",Password);
    User.findOne({Userid}), (err,user) =>{ 
                  
        if(user){
            if(Password === user.Password){
                res.status(200).json({message:"Login Successfull", user: user});
            }else{
                res.status(400).json({message:"Login Un-Successfull"});
            }
        }else{
           res.status(403).json({message:"User not Registered"}) 
        }
    }
})
app.listen(PORT, ()=>{
   console.log(`Server is running on ${PORT}`);
});

Answer 1

您在项目中使用的是哪个版本的 express？

将 CORS 放在解析上方，如下所示，

app.use(cors()); 
app.options('*', cors()); // this enables preflight
app.use(express.json());
app.use(express.urlencoded());

如果不添加/尝试下面的，上面应该这样做，

User.findOne({Userid}), (err,user) =>{ 
                  
        if(user){
            if(Password === user.Password){
                res.status(200).json({message:"Login Successfull", user: user});
               
            }else{
                res.status(400).json({message:"Login Un-Successfull"});
                
            }
        }else{
           res.status(403).json({message:"User not Registered"}) 
        }
    }