使用x-www-form-urlencoded的HttpClient POST请求

Question

我正在尝试使用x-www-form-urlencoded内容类型标头发出POST请求,如下所示:

login(username, password): Observable<any> {
    return this.http.post('/login', {
      username: username,
      password: password
      },
      {
        headers: new HttpHeaders()
          .set('Content-Type', 'x-www-form-urlencoded')
      }
      );

不幸的是我的API说我发送了空的用户名和密码.

所以我决定向我的登录端点发一个邮递员请求,看看问题来自哪里,邮递员请求确实返回了用户名和密码.

为什么当我从邮递员发布我的API返回我的用户名和密码时,当我从我的Angular应用程序发布时,我的API返回空值？有什么我想念的吗？

Answer 1

您将JSON数据发布到API而不是表单数据.下面的代码段应该有用.

login(username, password): Observable<any> {
  const body = new HttpParams()
    .set('username', username)
    .set('password', password);

  return this.http.post('/login',
    body.toString(),
    {
      headers: new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded')
    }
  );
}

Answer 2

比这里描述的其他方法更简单。

这就是我在Angular 7中工作的原因：

const payload = new HttpParams()
  .set('username', username)
  .set('password', password);

this.http.post(url, payload);

无需使用此方法显式设置标头。

请注意，HttpParams对象是不可变的。因此，执行以下操作将无法正常工作，它会给您带来空洞的身体：

const payload = new HttpParams();
payload.set('username', username);
payload.set('password', password);

this.http.post(url, payload);