表单提交数据返回400错误，JSON提交正常的问题解决方案

使用Form表单提交数据时接口返回400错误，无法正常创建用户；但用JSON格式提交相同数据时一切正常。

App.js #

import express from "express";
import userRoutes from "./routes/user.js";
import brandRoutes from "./routes/brand.js";
import modelRoute from "./routes/vehicle.model.js";
import serviceRoute from "./routes/service.js";
import appointmentRoute from "./routes/appointment.js";
import categoryRoute from "./routes/category.js";
import { connectDB } from "./utils/dbConnect.js";
import { errorMiddleware } from "./middlewares/error.js";
import cors from "cors";
import "dotenv/config";

const PORT = 8000;

connectDB();

const app = express();

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

app.use("/api/v1", userRoutes);
app.use("/uploads", express.static("uploads"));

app.use(errorMiddleware);

app.listen(PORT, () => {
  console.log(`Server connected at port ${PORT}`);
});

用户控制器（User.js） #

export const createUser = async (req, res, next) => {
  try {
    const { fullname, email, phone, password } = req.body;
    console.log(req.body);

    if (!fullname || !email || !phone || !password) {
      return next(new ErrorHandler("Please add all fields", 400));
    }

    const validate = await User.find({
      $or: [{ email: email }, { phone: phone }],
    });
    if (validate.length === 0) {
      const hashPassword = await bcrypt.hash(password, 10);
      const user = await User.create({
        fullname: fullname,
        email: email,
        phone: phone,
        password: hashPassword,
      });
      if (user) {
        res.status(200).json({ status: 1, message: "Account created.", user });
      }
    } else {
      res.status(400).json({ status: 0, message: "User already exist." });
    }
  } catch (error) {
    console.log(error);
    res.status(500).json({ status: 0, message: "Error", error });
  }
};

用户Schema（User.js） #

import mongoose from "mongoose";

const schema = new mongoose.Schema(
  {
    fullname: {
      type: String,
      required: [true, "Please enter your Fullname."],
    },
    email: {
      type: String,
      required: [true, "Please enter your Email."],
    },
    phone: {
      type: String,
      required: [true, "Please enter your Phone number."],
    },
    password: {
      type: String,
      required: [true, "Please enter your Password."],
    },
    role: {
      type: String,
      enum: ["admin", "user"],
      default: "user",
    },
    image: {
      type: String,
    },
  },
  {
    timestamps: true,
  }
);

export const User = mongoose.model("User", schema);

• 添加Form表单解析中间件：Express默认仅解析JSON格式请求体，Form表单提交的application/x-www-form-urlencoded格式数据需要额外中间件解析。在App.js的app.use(express.json());下方添加：

  app.use(express.urlencoded({ extended: true }));
  

  其中extended: true允许解析复杂嵌套对象，若无需该功能可设为false。

• 校验表单字段名一致性：确保前端Form中input标签的name属性值与后端req.body解构的字段（fullname、email、phone、password）完全一致，避免拼写错误或大小写不匹配。

• 处理多部分表单数据（若涉及文件上传）：如果Form表单包含文件上传（设置enctype="multipart/form-data"），需使用multer库解析请求体，安装后配置对应中间件处理文件和普通字段。

内容的提问来源于stack exchange，提问作者Kumghato K Khala