如何正确发送post请求

How to correctly send post request

我正在 Angular 中设置 Web 应用程序,在 Nodejs 中休息API,但我无法正确设置我的 post 用户身份验证请求

我已经设置了我的 api 并且我可以使用 curl 正确地测试它但是在客户端 (angular) 它无法通过验证所需字段的条件是礼物

函数在API:

exports.authenticate = function(req, res) {
  var new_user = new User(req.body);
  if (!new_user.login || !new_user.pwd) {
    res.status(400).send({
      error: true,
      message: 'Please provide all informations!'
    });
  } else {
    User.authenticate(new_user, function(err, user) {
      console.log('controller');
      if (err) {
        res.status(500).send(err);
      } else {
        console.log(user[0].id);
        var token = jwt.sign({
          id: user[0].id
        }, config.secret, {
          expiresIn: 3600
        });
        res.status(200).send({
          user: user,
          auth: true,
          token: token
        });
      }
    });
  }
}

User.authenticate 调用我的 sql 查询:

sql.query("SELECT * FROM user WHERE login = ?", [user.login], function(err, res) {
  if (err) {
    return res.status(500).send('Error  on the server ', err);
    //console.log("error select: ", err);
  } else {
    if (!res) {
      return res.status(404).send('No user found');
    } else {

      //sql.query("UPDATE user SET pwd = ? WHERE id = ?", [crypto.createHash('sha256').update(user.
      sql.query("SELECT * FROM user WHERE pwd = ?", [crypto.createHash('sha256').update(user.pwd + r
        if (err) {
          console.log("error: ", err);
          result(null, err);
        } else {


          result(null, res2);
        }
      });
    }
  }
});

Angular端(我的服务功能):

login(loguser: User) {
       return this.http.post<any>(`${environment.apiUrl}/authenticate`,
               { loguser }, { headers: new HttpHeaders().set('Content-Type', 'application/json')})

                       .pipe(map(user => {
                               // store user details and jwt token in local storage to keep user logged in between p
                               localStorage.setItem('currentUser', JSON.stringify(user));
                               this.currentUserSubject.next(user);
                               return user;
               }));
       }

登录组件:

onSubmit() {
  this.submitted = true;
  // stop here if form is invalid
  if (this.loginForm.invalid) {
    return;
  }

  this.loading = true;
  this.user.login = this.f.username.value;
  this.user.pwd = this.f.password.value;
  console.log(this.user);
  this.authenticationService.login(this.user)
    .pipe(first())
    .subscribe(
      data => {
        this.router.navigate([this.returnUrl]);
      },
      error => {
        this.error = error;
        this.loading = false;
     });
   }

console.log(this.user) 输出:{login: "cl", pwd: "cl"}

我的 post 请求在我的 api:

的这一部分被阻止
if (!new_user.login || !new_user.pwd){
  res.status(400).send({ error: true, message: 'Please provide all informations!' });

因为这是我提交表格时得到的答案。

当我这样测试时,我可以得到正确的答案:

curl -v -X POST --data '{"login":"cl","pwd":"cl"}' --header "Content-Type: application/json" https://@api:8443/autenticate

我想得到好的答案。

问题出在您的 Angular 代码中:

login(loguser: User) {
  return this.http.post<any>(`${environment.apiUrl}/authenticate`, 
    { loguser }, 
    {
      headers: new HttpHeaders().set('Content-Type', 'application/json')
    })
    .pipe(map(user => {
      // store user details and jwt token in local storage to keep user logged in between p
      localStorage.setItem('currentUser', JSON.stringify(user));
      this.currentUserSubject.next(user);
      return user;
    }));
}

这段代码:

{ loguser }

使用 TypeScript 和 ECMAScript 2015 中引入的 "shortcut property name" 语法来创建一个对象,该对象具有一个名为 loguser 的 属性,它具有 loguser 变量的值。相当于这样写:

{ loguser: loguser }

相反,您可以在代码中传递变量本身:

login(loguser: User) {
  return this.http.post<any>(`${environment.apiUrl}/authenticate`, 
    loguser, // Just the object itself
    {
      headers: new HttpHeaders().set('Content-Type', 'application/json')
    })
    .pipe(map(user => {
      // store user details and jwt token in local storage to keep user logged in between p
      localStorage.setItem('currentUser', JSON.stringify(user));
      this.currentUserSubject.next(user);
      return user;
    }));
}

这将传递对象,loginpwd 属性完好无损。