Angular 5 HttpClient：将 POST 参数作为 URL 编码字符串发送

Question

角度 5.0.1

我正在查看 Angular HttpClient 的文档： https://angular.io/guide/http ，但我似乎无法弄清楚如何将 POST 参数作为 URLEncoded 字符串而不是 JSON 字符串发送。例如，我的 Java http 客户端默认会这样发送：

 username=test%40test.com&password=Password1&rolename=Admin

但是 Angular 想要默认发送为 Json：

 {"username":"[e-mail]","password":"Password1","rolename":"Admin"}

这是我目前的代码：

     let body = {
      username: "[e-mail]",
      password: "Password1",
      rolename: "Admin"
    };

 let headers = new HttpHeaders();
    headers = headers.set("Content-Type", "application/x-www-form-urlencoded");

    this.http.post(this.baseUrl, body, {
      headers: headers,
    })
      .subscribe(resp => {
      console.log("response %o, ", resp);
    });

我也试过添加 HttpParams：

 let  httpParams = new HttpParams();
httpParams.append("username", "[e-mail]");
httpParams.append("password", "Password1");
httpParams.append("rolename", "Admin");

...
headers: headers,
      params: httpParams

但是HttpParams好像没有作用。

知道如何对请求而不是 Json 进行 URL 编码吗？

原文由 jwBurnside 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

append() 返回一个 新的 HttpParams 对象，因此您需要对 httpParams 代码稍作修改。尝试这个：

 let httpParams = new HttpParams()
    .append("username", "[e-mail]")
    .append("password", "Password1")
    .append("rolename", "Admin");

在上面的代码中，我们链接我们的 append 调用，在每次调用时创建一个新的 HttpParams 对象。上次我们调用 append 时，返回的 HttpParams 对象将包含所有先前附加的参数。

原文由 Christian Santos 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

那是因为 HttpParam 是不可变的。

你可以 在这里阅读为什么

简而言之：

 let httpParams = new HttpParams()
    .append("username", "[e-mail]")
    .append("password", "Password1")
    .append("rolename", "Admin");

因为应用程序可能会重试请求，拦截器链可能会多次处理单个请求。如果请求是可变的，重试请求将不同于原始请求。不变性确保拦截器在每次尝试时看到相同的请求。

原文由 Ced 发布，翻译遵循 CC BY-SA 3.0 许可协议