使用Axios提交注册数据时遭遇500状态码错误的排查求助
使用Axios提交注册数据时遭遇500状态码错误的排查求助
各位大佬好!我最近在开发一个注册功能,前端用React+Axios提交表单数据到Express后端,结果一直收到500状态码的错误:
AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE'}
奇怪的是,我用Postman测试同一个接口http://localhost:5000/api/users/register的时候,数据能正常存入数据库,说明后端和数据库本身是没问题的,问题应该出在前端的请求上?
我把相关代码贴出来,麻烦大家帮我看看哪里出错了:
前端Signup组件代码
import React, { useState } from "react"; import axios from "axios"; import { useNavigate } from "react-router-dom"; const Signup = () => { const [formData, setFormData] = useState({ fname: "", lname: "", email: "", password: "", userType: "customer", }); const navigate=useNavigate() const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = async (e) => { e.preventDefault(); try { const res = await axios.post( "http://localhost:5000/api/users/register", formData, { headers: { "Content-Type": "application/json", }, } ); console.log(res.data); setFormData({ fname: "", lname: "", email: "", password: "", userType: "customer", }); if(res.status === 201){ navigate('/login'); } } catch (error) { console.error(error); } }; return ( <div className="flex items-center justify-center min-h-screen bg-gray-100"> <form className="w-full max-w-md bg-white p-8 shadow-md rounded-md" onSubmit={handleSubmit} > <h2 className="text-2xl font-bold text-center mb-6">Sign Up</h2> <div className="mb-4"> <label htmlFor="fname" className="block text-gray-700 font-medium mb-1" > First Name </label> <input type="text" id="fname" name="fname" value={formData.fname} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500" required /> </div> <div className="mb-4"> <label htmlFor="lname" className="block text-gray-700 font-medium mb-1" > Last Name </label> <input type="text" id="lname" name="lname" value={formData.lname} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500" required /> </div> <div className="mb-4"> <label htmlFor="email" className="block text-gray-700 font-medium mb-1" > Email </label> <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500" required /> </div> <div className="mb-6"> <label htmlFor="password" className="block text-gray-700 font-medium mb-1" > Password </label> <input type="password" id="password" name="password" value={formData.password} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500" required /> </div> <button type="submit" className="w-full bg-orange-500 text-white py-2 px-4 rounded-md font-bold hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500" > Sign Up </button> </form> </div> ); }; export default Signup;
后端User模型代码
const mongoose = require("mongoose"); const UserSchema = new mongoose.Schema( { fname: { type: String, required: true, }, lname: { type: String, required: true, }, email: { type: String, required: true, }, password: { type: String, required: true, }, userType: { type: String, enum: ["admin", "user"], default: "user", }, }, { timestamps: true, } ); module.exports = mongoose.model("User", UserSchema);
注册路由代码
const express = require("express"); const router = express.Router(); const User = require("../../models/User"); const bcrypt = require("bcrypt"); const jwt = require("jsonwebtoken"); const authenticateToken = require("../../middleware/auth"); //register router.post("/register", async (req, res) => { try { const salt = await bcrypt.genSalt(10); const password = await bcrypt.hash(req.body.password, salt); const userobj = { fname: req.body.fname, lname: req.body.lname, email: req.body.email, password: password, userType: req?.body?.userType || "user", }; const user = new User(userobj); await user.save(); return res.status(201).json(user); } catch (error) { res.status(500).json({ message: "Something went wrong" }); } }); module.exports = router;
Express主入口文件代码
require('dotenv').config() const express=require('express'); const app=express(); const bodyParser=require("body-parser"); const cors=require("cors"); const connectDB=require('./config/db'); //parse requests app.use(bodyParser.json()); app.use(express.json()); app.use(cors()); //db connectDB(); //routes //users route app.use('/api/users', require('./routes/api/user')) //task route app.use('/api/task', require('./routes/api/task')) const port=5000; app.listen(port, () =>{ console.log(`Server is running on port ${port}`) })
我检查了前端的请求数据,formData里的userType是"customer",而后端模型里的userType枚举值是["admin", "user"],不过后端代码里已经做了默认值处理req?.body?.userType || "user",应该会把不符合的替换成"user"吧?但为什么还是会触发500错误呢?或者有没有其他我没注意到的问题?
麻烦各位帮忙看看,谢谢啦!
备注:内容来源于stack exchange,提问作者Arif Shahriyar Nader
相关产品推荐
相关产品推荐

