Angular 角度HttpClient post不工作

我正在更改代码，以将http api从“@angular/http”更改为“@angular/common/http”。我的大多数请求都可以正常工作，但无论我如何努力，为我带来刷新令牌的身份验证都无法工作。。。。请看，我的代码如下：

    const headerHttp = new HttpHeaders();
    headerHttp.set('Content-Type', 'application/x-www-form-urlencoded');
    headerHttp.set('Authorization', 'Basic YW5ndWxhcjphbmd1bGFy');

    this.clientHttp.post(this.oauthTokenUrl,
      { username: user, password: pwd , grant_type: 'password' },
      {  headers: headerHttp, withCredentials: true })
        .subscribe(
      res => {
         console.log(res);
      },
      err => {
         console.log('Error occured');
      }
    );

但是参数（用户名、密码和授权类型）没有到达服务器，输入屏幕正在弹出

这是我的请求的结果，使用'@angular/http':

图1

这是我的请求不起作用的结果，我在上面输入了代码

图2

编辑1-认证输入屏幕不再弹出，代码如下

const _params = new HttpParams()
.set('grant_type', 'password')
.set('username', usuario)
.set('password', senha );

const _headers = new HttpHeaders()
  .set('Authorization', 'Basic YW5ndWxhcjphbmd1bGFy')
  .set('Content-Type', 'application/x-www-form-urlencoded');

const httpOptions = {
  headers: _headers,
  params: _params,
  withCredentials: true
};

this.clientHttp.post<String>(this.oauthTokenUrl, httpOptions).subscribe(
res => {
  console.log(res);
},
err => {
  console.log('Error occurred', err);
});

但是现在HttpClient创建了一个“请求负载”，而不是“表单数据”。为什么？servlet无法像读取“表单数据”那样读取“请求有效负载”，因此无法正确执行身份验证

编辑2-解决方案

经过无数次尝试后，我根据@mtpultz的建议推出了一个新的FormData（）

const params = new HttpParams()
.set('grant_type', 'password')
.set('username', user)
.set('password', pwd );

const headers = new HttpHeaders()
  .set('Authorization', 'Basic xpto')
  .set('Content-Type', 'application/x-www-form-urlencoded');

const httpOptions = {
  headers: headers,
  params: params,
  withCredentials: true
};

//The line works ( Requisition with Form Data, like IMAGE 1 above )
this.httpClient.post<Response>(this.oauthTokenUrl,  new FormData(), httpOptions )

//The line, without new FormData(), doesn't work.  ( Requisition with Request Payload, like IMAGE 2 above )
this.httpClient.post<Response>(this.oauthTokenUrl,  httpOptions )

const-params=new-HttpParams（）
.set（'授权类型'，'密码'）
.set（'username'，user）
.set（'密码'，pwd）；
const headers=新的HttpHeaders（）
.set（'Authorization'，'Basic xpto'）
.set（'Content-Type'，'application/x-www-form-urlencoded'）；
常量httpOptions={
标题：标题，
params:params，
证书：正确
};
//行工作（带有表单数据的请购单，如上图1）
this.httpClient.post（this.oauthTokenUrl，new FormData（），httpOptions）
//没有new FormData（）的行无法工作。（带有请求有效负载的请购单，如上图2所示）
this.httpClient.post（this.oauthTokenUrl，httpOptions）

将您的代码放入一个控制台，当您在控制台中查看时，这似乎发送了

表单数据

，而不是

请求有效负载

。我认为，它正确发送的原因是基于本机表单将表单字段名称/值对作为查询字符串提交，这将它们作为参数添加

  public test() {
    const headers = new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic YW5ndWxhcjphbmd1bGFy'
    });
    const params = new HttpParams()
      .set('username', 'test@example.com')
      .set('password', 'secret')
      .set('grant_type', 'password');
    const options = {
      headers,
      params,
      withCredentials: true
    };
    this.httpClient.post('https://reqres.in/api/example', null, options)
      .subscribe(response => console.log(response));
  }

---

此外，我建议使用

可观察值

，不要将您的回答转换为

承诺

。如果您对

可观察对象不太满意，但只要学习一些处理HTTP请求的基本知识就不会花太长时间了。
我认为您需要提供更多的周围代码来解决这个问题，因为您所做的似乎是正确的。@mtpultz，我试图删除代码的所有周围内容，即使是HttpInterceptor，也不会改变结果。但是我添加了更多的信息，这个问题对我来说似乎更清楚。不幸的是，不是解决方案…：-（是的，您的原始代码肯定无法工作，因为
HttpClient
请求和响应是不可变的，所以
headers.append（…）
实际上会返回一个副本，您需要通过执行
headers=headers.append（…）来存储该副本。）
，但是您没有存储它，而且如果您这样做，
标题必须是
let
not
const
。上一个版本没有“new FormData（）”，不起作用。谢天谢地，您的第一个解决方案仍然起作用。：-）代码与上面的代码相同，加上“withCredentials:true”。我再次编辑添加了“new FormData（）”作为解决方案，即使我不完全清楚这种行为背后的原因。我认为传递
new FormData（）
不能使它正常工作。您应该能够通过
null
并获得相同的结果。我认为这是可行的，因为提交时的本机表单会将表单字段名称/值对作为查询字符串添加到请求中。因此，通过将它们作为参数添加，可以生成与本机表单提交相同的查询字符串结果。您能告诉我这是否是一个类似的问题吗？您只提供了代码，但没有解释问题。我会说不，因为你没有使用HttpParams。你有错误吗？
  public test() {
    const headers = new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic YW5ndWxhcjphbmd1bGFy'
    });
    const params = new HttpParams()
      .set('username', 'test@example.com')
      .set('password', 'secret')
      .set('grant_type', 'password');
    const options = {
      headers,
      params,
      withCredentials: true
    };
    this.httpClient.post('https://reqres.in/api/example', null, options)
      .subscribe(response => console.log(response));
  }