axios 请求失败，状态码 404（react，mongodb）

Question

我进行了注册和登录，现在我想添加到不同的架构，但出现错误。 本地主机：3001/注册并登录工作

• 注册和登录工作完美 错误消息： “消息：‘请求失败，状态代码为 404’，名称：‘AxiosError’，代码：‘ERR_BAD_REQUEST’”

模型-classes.js

const mongoose = require('mongoose');

const ClassesSchema = new mongoose.Schema({
    classname : String,
})

const ClassesModel = mongoose.model('classes', ClassesSchema);

module.exports = ClassesModel;

index.js

const cors = require('cors');
const express = require('express');
const mongoose = require('mongoose');
const FormDataModel = require ('../models/FormData');
const FormData2Model = require ('../models/Classes');


const app = express();
app.use(express.json());
app.use(cors());

mongoose.connect('mongodb+srv://amirpellman:*******@cluster.kwcktyi.mongodb.net/');

app.post('/addclass', (req, res)=>{
    // To post / insert data into database

    const {email, password} = req.body;
    FormData2Model.findOne({email: email})
    .then(user => {
        if(user){
            res.json("Already registered")
        }
        else{
            FormData2Model.create(req.body)
            .then(log_reg_form2 => res.json(log_reg_form2))
            .catch(err => res.json(err))
        }
    })
    
})

屏幕-addclass.js

    const [classname, setClassname] = useState();
   

    const handleSubmit1 = (event) => {
        event.preventDefault();
        
        axios.post( 'http://localhost:3001/addclass', {classname})
        .then(result => {
            console.log(result);
            if(result.data === "Already registered"){
                alert("E-mail already registered! Please Login to proceed.");
            }
            else{
                alert("Registered successfully! Please Login to proceed.")
            }
            
        })
        .catch(err => console.log(err),alert("asdas"));
    }

    return (
        <div>
        <div className="d-flex justify-content-center align-items-center text-center vh-100" style= {{backgroundImage : "linear-gradient(#00d5ff,#0095ff,rgba(93,0,255,.555))"}}>
            <div className="bg-white p-3 rounded" style={{width : '40%'}}>
                <h2 className='mb-3 text-primary'>Register</h2>
                <form onSubmit={handleSubmit1}>
                    <div className="mb-3 text-start">
                        <label htmlFor="exampleInputEmail1" className="form-label">
                            <strong >Name</strong>
                        </label>
                        <input 
                            type="text"
                            placeholder="Enter Name"
                            className="form-control" 
                            id="exampleInputname" 
                            onChange={(event) => setClassname(event.target.value)}
                            required
                        /> 
                    </div>
                  
                   
                    <button type="submit" className="btn btn-primary">Register</button>
                </form>

                
            </div>
        </div>
    </div>
    )
}

export default Addclass

Answer 1

email

中不会有

password

或

req.body

，因为

addclass.js

中的classname不包含它。

您需要修改post请求如下：

const handleSubmit1 = (event) => {
    event.preventDefault();
    const details = { 
       email : classname,
       // you can also include password in the this
    }
    
    axios.post( 'http://localhost:3001/addclass', details)
    .then(result => {
        console.log(result);
        if(result.data === "Already registered"){
            alert("E-mail already registered! Please Login to proceed.");
        }
        else{
            alert("Registered successfully! Please Login to proceed.")
        }
        
    })
    .catch(err => console.log(err),alert("asdas"));
}

还包括 api 服务中的错误处理。使用

try-catch

并检查 terminal 中的日志，这对于调试很有用。