MERN项目注册页面Axios请求报错求助：无法提交表单数据至数据库

开发MERN项目时，尝试从注册页面表单获取数据并通过Axios提交至数据库时出现报错。已经检查并刷新后端app.js文件，但仍无法定位报错原因，恳请帮忙排查。

前端Register组件代码 #

import "./register.scss";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
import { useState } from "react";
import apiRequest from "../../lib/apiRequest";

function Register() {

  const [error, setError] = useState("")

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    const username = formData.get("username"); 
    const email = formData.get("email"); 
    const password = formData.get("password");

    try {
      const res = await axios.post("http://localhost:5000/api/auth/register", {
        username, email, password
      })
      console.log(res.data);
    } catch (error) {
      console.log(error);
      // setError()
    }
  }
  return (
    <div className="registerPage">
      <div className="formContainer">
        <form onSubmit={handleSubmit}>
          <h1>Create an Account</h1>
          <input name="username" type="text" placeholder="Username" />
          <input name="email" type="text" placeholder="Email" />
          <input name="password" type="password" placeholder="Password" />
          <button>Register</button>
          <Link to="/login">Do you have an account?</Link>
        </form>
      </div>
      <div className="imgContainer">
        <img src="/bg.png" alt="" />
      </div>
    </div>
  );
}

export default Register;

后端app.js代码 #

import express from "express";
import cors from "cors";
import authRoute from "./routes/auth.route.js"
import postRoute from "./routes/post.route.js"
import cookieParser from "cookie-parser"
const app = express();
app.use(cors({ origin: process.env.CLIENT_URL, credentials:true }));
app.use(express.json());
app.use(cookieParser());
app.use("/api/posts", postRoute)
app.use("/api/auth", authRoute);

app.listen(process.env.PORT, ()=>{
    console.log("Server is running");
})

排查方向建议 #

• 确认process.env.CLIENT_URL环境变量是否配置正确，前端请求地址是http://localhost:5000，如果变量值不匹配会触发CORS错误
• 检查auth.route.js中的/register路由：是否正确处理POST请求、是否有解析请求体逻辑、数据库连接是否正常、操作是否有错误捕获
• 查看前端控制台的具体报错信息（比如网络错误、404/500状态码、数据库错误等），这是定位问题的关键
• 用Postman或curl直接测试后端接口：发送POST请求到http://localhost:5000/api/auth/register，携带username、email、password参数，验证接口本身是否正常
• 确认Axios请求的Content-Type是否为application/json，后端已配置express.json()，只要请求格式正确就能解析
• 检查后端是否有未处理的异常，比如数据库操作是否遗漏try/catch，是否返回了正确的响应状态码

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