Question

我正在尝试使用NodeJS，Express和MongoDB发出PUT请求。我目前遇到的问题是我不断收到error **400**，但不确定原因为何。

我真正想做的是在注册某个用户后，在我的 USER 集合中上传编辑字段。这应该在特定的/user/edit/:id路由上发生。

我的应用程序使用标准的MVC模式构建。

我的Mongo Schema的结构如下：

let UserSchema = new mongoose.Schema({
  username: String,
  password: String,
  email: String,
  avatar: String,
  firstName: String,
  lastName: String,
  laps:[{ type: Schema.Types.ObjectId, ref: 'Stats' }]
});

这是我的服务

exports.updateUser = async function(user) {
  let id = user.id;
  let oldUser;
  try {
    //Find the old User Object by the Id
    oldUser = await User.findById(id);
  } catch(e) {
    throw Error("Error occured while Finding the User");
  }
  // If no old User Object exists return false
  if (!oldUser) {
    return false;
  }
  //Edit the User Object
  oldUser.firstName = user.firstName || oldUser.firstName;
  oldUser.lastName = user.lastName || oldUser.lastName;
  oldUser.avatar = user.avatar || oldUser.avatar;
  try {
    let savedUser = await oldUser.save();
    return savedUser;
  } catch(e) {
    throw Error("And Error occured while updating the User");
  }
};

我正在使用的控制器：

exports.updateUser = async function(req, res, next) {
  if (!req.body._id){
    return res.status(400).json({status: 400, message: "Id must be present"})
  }
  let id = req.body._id;
  let user = {
    id,
    firstName: req.body.firstName || null,
    lastName: req.body.lastName || null,
    avatar: req.body.avatar || null
  };
  try {
    let updatedUser = await UserService.updateUser(user);
    return res.status(200).json({status: 200, data: updatedUser, message: "Successfully Updated User"})
  } catch(e) {
    return res.status(400).json({status: 400, message: e.message})
  }
};

路由器文件中的路由路径：

router.post('/edit/:id', UserController.updateUser);

服务器文件中用户的路由路径：

app.use('/user', require('./api/routes/user.route'));

我知道大多数4**错误来自应用程序的前端，因此我还将在其后面张贴表单和构造函数。我正在使用ReactJS作为框架。

前端表格：

class UserProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      avatar: '',
      resultsSubmitted: false
    };
    this.formChange = this.formChange.bind(this);
    this.resultsSubmit = this.resultsSubmit.bind(this);
  }
  formChange(e) {
    console.log("form changed" + e.target);
    const { name, value } = e.target;
    this.setState({ [name]: value });
  }
  resultsSubmit(e) {
    e.preventDefault();
    const accessToken = JSON.parse(localStorage.getItem('auth_user')).data.access_token;
    const { avatar } = this.state;
    const { dispatch } = this.props;
    if (avatar) {
      console.log("submitting results: " + avatar);
      dispatch(userActions.addAvatar(avatar, accessToken));
    }
  }
  render(){
      const { avatar, resultsSubmitted} = this.state;
    return (
      <div className="container-fluid no-gutters page-login">
        <div className="row">
          <div className="login-wrapper">
            <h2> Edit User Profile </h2>

            <form onSubmit={this.resultsSubmit}>
              <div className="form-group">
                Paste Avatar URL: <input type="text" value={avatar} name="avatar" id="" onChange={this.formChange} />
              </div>
              <input type="submit" className="btn btn-primary btn-lg btn-block" value="submit"/>
            </form>

          </div>
        </div>
      </div>
    )
  }
}
function mapStateToProps(state) {
  const { layout } = state;
  return {
    layout
  };
}
export default connect(mapStateToProps)(UserProfile);

我的调度：

function addAvatar(avatar, token) {
  return dispatch => {
    dispatch(request());
    userService.addAvatar(avatar, token)
      .then(
        user => {
          dispatch(success(user));
          history.push(`${process.env.PUBLIC_URL}/`);
        },
        error => {
          dispatch(failure(error));
          dispatch(alertActions.error(error));
        }
      );
  };
  function request() { return { type: userConstants.AVATAR_REQUEST } }
  function success(user) { return { type: userConstants.AVATAR_SUCCESS, user } }
  function failure(error) { return { type: userConstants.AVATAR_FAILURE, error } }
}

HTTP Post服务：

function addAvatar(avatar){
  const requestOptions = {
    method: 'POST',
    headers: authHeader(),
    body:  avatar
  };
  return fetch('http://localhost:3003/user/edit/:id', requestOptions)
    .then(response => {
      if (!response.ok) {
        console.log("+",response,"+");
        return Promise.reject(response.statusText);
      }else{
        console.log(response, "the user service response was gooooooooooood");
      }
      return response.json();
    })
    .then(data => console.log(data,"WHT DO WE HAVE HERE?"));
}

为巨大的代码墙道歉，但我想包括所有内容。

我在路线POST上收到错误400（错误请求） http://localhost:3003/user/edit/:id

Answer 1

在获取请求中，您仅将头像作为正文发送，并且在updateUser函数上，您具有以下if语句：

if (!req.body._id){
    return res.status(400).json({status: 400, message: "Id must be present"})
}

因此很明显，您在请求正文时没有_id，而是使用化身，实际上，您是将id作为参数发送的

'http://localhost:3003/user/edit/:id'

因此您可以将此行更改为解决方法

if (!req.params.id){

希望有帮助。

Answer 2

下面的代码片段显示您正在尝试从请求的正文中获取ID参数。

if (!req.body._id){
    return res.status(400).json({status: 400, message: "Id must be present"})
}

在中，路由/user/edit/:id显示ID参数实际上是通过URL传递的，要访问它，您所需要做的就是使用{ {1}}。 req.params.id包含通过路由或URL路径传递的所有参数。

以上代码段应更正为

req.params

请检查https://expressjs.com/en/guide/routing.html#route-parameters，以获取有关如何处理route参数的正确指南。

NodeJS PUT请求返回错误400（错误请求）

2 个答案: