无法在 Angular 中进行 x-www-form-urlencoded POST

问题描述

我有一个可用的 POST 和 GET 服务，并且没有发现 CORS 等问题。但是，我只是无法模仿在 Postman（它工作的地方）中执行的调用，我唯一能想象的是我以某种方式错误地设置了 x-www-form-urlencoded 格式。出于某种原因，谷歌搜索示例给了我很多的西班牙语和中文站点。但是，从那里复制示例并没有解决任何问题。

getToken(code: string): Observable<any> {

  let url = "https://localhost:44301/connect/token";

  let payload = {
    client_id: "awesome_client",client_secret: "HakunaMatata",redirect_uri: "http://localhost:44304/page01",code: code,grant_type: "authorization_code"
  };

  let headers = { "Content-Type": "x-www-form-urlencoded" };
  let options = { headers: headers };
  
  return this.http.post<any>(url,payload,options);
}

我知道有一些 changes in Angular 12 所以我尝试了一个不同的版本（也是基于谷歌搜索和示例）。同样的问题。

getToken(code: string): Observable<any> {
  ...
  return this.http.post<any>(
    url,payload.toString(),{
      headers: new HttpHeaders()
        .set('Content-Type','application/x-www-form-urlencoded')
    });
}

我只是看不到我错过了什么。 Postman 产生预期结果（body/x-www 已启用）。

https://localhost:44301/connect/token
client_id:awesome_client
client_secret:HakunaMatata
redirect_uri:http://localhost:44304/page01
代码：4B822...
grant_type:authorization_code

解决方法

当您使用 objet 作为 HTTP 客户端的主体时，它会将其序列化为 json。 如果您想将数据作为 x-www-form-urlencoded 发送，您需要使用 HttpParams 作为正文。

  getToken(code: string) {
    let url = 'https://localhost:44301/connect/token';

    let param = {
      client_id: 'awesome_client',client_secret: 'HakunaMatata',redirect_uri: 'http://localhost:44304/page01',code: code,grant_type: 'authorization_code'
    };
    var payload = new HttpParams({ fromObject: param });

    let headers = { 'Content-Type': 'x-www-form-urlencoded' };
    let options = { headers: headers };

    return this.http.post<any>(url,payload,options);
  }