用户验证使用 Postman 工作，客户端使用 FormData 失败

Question

我使用邮递员检查后端代码，它正在工作。使用邮递员将名称，电子邮件，密码存储在数据库中。但是当我在注册表单中输入名称，电子邮件，密码时，如果显示此错误-----用户验证失败：密码：请输入您的密码，电子邮件：请输入您的电子邮件，姓名：请输入您的姓名

用户模型.js

const mongoose = require("mongoose");
const validator = require("validator");

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: [true, "Please Enter Your Name"],
    maxLength: [30, "Name cannot exceed 30 characters"],
    minLength: [4, "Name should have more than 4 characters"],
  },
  email: {
    type: String,
    required: [true, "Please Enter Your Email"],
    unique: true,
    validate: [validator.isEmail, "Please Enter a valid Email"],
  },
  password: {
    type: String,
    required: [true, "Please Enter Your Password"],
    minLength: [8, "Password should be greater than 8 characters"],
    select: false,
  },
  role: {
    type: String,
    default: "user",
  },
  resetPasswordToken: String,
  resetPasswordExpire: Date,
});
module.exports = mongoose.model("User", userSchema);

catchAsyncErrors.js

module.exports = (theFunc) => (req, res, next) => {
    Promise.resolve(theFunc(req, res, next)).catch(next);
  };

用户控制器.js

exports.registerUser = catchAsyncErrors(async (req, res, next) => {
    
 const user = await User.create(req.body);
    
    res.status(201).json({
        success:true,
        user,
    });
});

用户路由.js

router.route("/register").post(registerUser);

userReducer.js

export const userSignupReducer = (state = { user: {} }, action) => {
  switch (action.type) {
    case REGISTER_USER_REQUEST:
      return {
        loading: true,
        isAuthenticated: false,
      };

    case REGISTER_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        isAuthenticated: true,
        user: action.payload,
      };

    case REGISTER_USER_FAIL:
      return {
        ...state,
        loading: false,
        isAuthenticated: false,
        user: null,
        error: action.payload,
      };

    case CLEAR_ERRORS:
      return {
        ...state,
        error: null,
      };

    default:
      return state;
  }
};

userAction.js

export const register = (userData) => async (dispatch) => {
  try {
    dispatch({ type: REGISTER_USER_REQUEST });

    const { data } = await axios.post(`/api/v1/register`, userData);

    dispatch({ type: REGISTER_USER_SUCCESS, payload: data.user });
  } catch (error) {
    dispatch({
      type: REGISTER_USER_FAIL,
      payload: error.response.data.message,
    });
  }
};

store.js

...
...
const reducer = combineReducers({
userSignup:userSignupReducer,
});
...
...

注册.js

import React, { Fragment, useState, useEffect } from "react";
import Loader from "../Loader/Loader";
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from "react-redux";
import { clearErrors, register } from "../../actions/userAction";

const SignUp = () => {
  const dispatch = useDispatch();
  const { error, loading } = useSelector(
    (state) => state.userSignup
  );

  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "",
  });

  const { name, email, password } = user;


  const registerSubmit = (e) => {
    e.preventDefault();

    const myForm = new FormData();

    myForm.set("name", name);
    myForm.set("email", email);
    myForm.set("password", password);
    dispatch(register(myForm));
  };

  const registerDataChange = (e) => {
    if (e.target.name === "name" || e.target.name === "email" || e.target.name === "password") {
      setUser({ ...user, [e.target.name]: e.target.value });
    }
  };

  useEffect(() => {
    if (error) {
      alert(error);
      dispatch(clearErrors());
    }
  }, [dispatch, error]);

  return (
    <Fragment>
      {loading ? (
        <Loader />
      ) : (
        <Fragment>
          <div className="LoginSignUpContainer">
            <div className="LoginSignUpBox">
              <h1 className='logintp'>Signup</h1>
              <h4 className='logintpo'>Please fill in this form to create an account!</h4>
              <form
                className="signUpForm"
                encType="multipart/form-data"
                onSubmit={registerSubmit}
              >
                <div className="signUpName">
                  <input className="nosmart"
                    type="text"
                    placeholder="Name"
                    required
                    name="name"
                    value={name}
                    onChange={registerDataChange}
                  />
                </div>
                <div className="signUpEmail">
                  <input className="nosmart"
                    type="email"
                    placeholder="Email"
                    required
                    name="email"
                    value={email}
                    onChange={registerDataChange}
                  />
                </div>
                <div className="signUpPassword">
                  <input className="nosmart"
                    type="password"
                    placeholder="Password"
                    required
                    name="password"
                    value={password}
                    onChange={registerDataChange}
                  />
                </div>
                <input type="submit" value="Register" className="signUpBtn" />

                <div className='asign'>
                  <h4>Already have an account?</h4> <h4 >
                    <Link className='signupfm' to='/login'> Login</Link>
                  </h4>
                </div>
              </form>
            </div>
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};
export default SignUp;

Answer 1

你的问题在这里...

 const myForm = new FormData(); myForm.set("name", name); myForm.set("email", email); myForm.set("password", password); dispatch(register(myForm));

使用FormData将请求正文发布为multipart/form-data 。 要处理这样的请求，您需要像Multer这样的专用中间件。

通常，除非您要上传文件，否则您需要处理application/json或application/x-www-form-urlencoded请求主体，并让它们由以下中间件处理

app.use(express.json()); // application/json
app.use(express.urlencoded()); // application/x-www-form-urlencoded

要将数据作为 JSON 发布，只需传入一个纯 JavaScript 对象

dispatch(register({ name, email, password }));

要将数据发布为 urlencoded，请传入URLSearchParams实例

dispatch(register(new URLSearchParams({ name, email, password })));