首次开发MERN网站注册功能遇400 Bad Request错误求助

问题背景 #

首次开发MERN栈网站，注册功能前端提交数据时持续返回400 Bad Request，但相同格式的请求在Postman中可正常提交。前后端服务均正常运行，相关代码与请求数据如下：

后端注册控制器代码 #

// handling signup
export const signupControl = async (req, res) => {
  try {
    const { fullname, matric, password, matricImage } = req.body;

    // check if matric already exist
    const user = await User.findOne({ matric });
    if (user) {
      return res.status(400).json({ error: `matric already exist` });
    }

    // check if password length is less than 8
    const passLength = password;
    if (passLength.length < 8) {
      return res.status(400).json({ error: "password is less than 8" });
    }

    // crypt password
    const salt = await bcrypt.genSalt(10);
    const hashedPass = await bcrypt.hash(password, salt);

    // create new user
    const newUser = User.create({
      fullname,
      matric,
      password: hashedPass,
      matricImage,
    });

    if (newUser) {
      generateTokenAndCookie((await newUser)._id, res);
      (await newUser).save();

      res.status(200).json({
        _id: (await newUser)._id,
        fullname: (await newUser).fullname,
        matric: (await newUser).matric,
        password: (await newUser).password,
        matricImage: (await newUser).matricImage,
      });
    } else {
      res.status(400).json({ error: "invalid user data" });
      console.log("error");
    }
  } catch (err) {
    console.log(err);
    res.status(500).json({ error: `${err.message}` });
  }
};

前端提交代码 #

const Signup = () => {
  const [inputs, setInputs] = useState({
    fullname: "",
    matric: "",
    password: "",
    matricImage: "",
  });

  const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = {
      fullname: inputs.fullname,
      matric: inputs.matric.trim(), // Trim whitespace
      password: inputs.password,
      matricImage: inputs.matricImage,
    };

    console.log(formData);

    try {
      const response = await fetch("http://localhost:3000/auth/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

      const data = await response.json();
    } catch (error) {
      toast.error(error.message);
    }
  };
};

前端控制台输出的请求数据 #

{
  "fullname": "ahmed omar",
  "matric": "b032219461",
  "password": "1234567890",
  "matricImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaI"
}

排查方向与解决方案 #

1. 先获取后端返回的具体错误信息 #

前端代码未处理非200状态码的响应数据，无法得知后端返回400的具体原因。修改前端代码，打印并展示完整响应：

try {
  const response = await fetch("http://localhost:3000/auth/signup", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(formData),
  });

  const data = await response.json();
  console.log("后端响应:", data); // 打印完整响应数据
  if (!response.ok) {
    toast.error(data.error || "注册失败");
  }
} catch (error) {
  toast.error(error.message);
}

此步骤可直接定位后端返回400的核心原因（如字段校验失败、请求体过大等）。

2. 修复后端异步处理逻辑问题 #

User.create()是异步方法，返回Promise，当前代码未直接await，导致多次await newUser存在潜在风险，且newUser.save()属于冗余操作（create已自动完成文档保存）：

// 修改创建用户的代码块
const newUser = await User.create({ // 添加await，直接获取创建后的文档
  fullname,
  matric,
  password: hashedPass,
  matricImage,
});

if (newUser) {
  generateTokenAndCookie(newUser._id, res); // 无需再await
  // 移除newUser.save()，create已完成保存操作

  res.status(200).json({
    _id: newUser._id,
    fullname: newUser.fullname,
    matric: newUser.matric,
    password: newUser.password,
    matricImage: newUser.matricImage,
  });
}

3. 配置跨域资源共享(CORS) #

Postman不受浏览器跨域限制，但前端请求会被浏览器拦截。确保后端已配置CORS：

• 安装cors包：npm install cors
• 在后端入口文件中添加配置：

import cors from 'cors';
// ...
app.use(cors()); // 开发环境允许所有来源，生产环境可配置特定origin

4. 调整请求体大小限制 #

matricImage为base64格式图片，若体积过大，默认的Express JSON解析器会因超出限制返回400。修改后端JSON中间件配置：

app.use(express.json({ limit: '5mb' })); // 根据图片实际大小调整limit值

5. 验证请求URL与后端路由匹配 #

确认前端请求的http://localhost:3000/auth/signup与后端的路由配置完全一致，包括端口、路径前缀、请求方法等。

内容的提问来源于stack exchange，提问作者ahmed aljabri