You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 18:29:29