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

【问题标题】：HttpClient POST request using x-www-form-urlencoded使用 x-www-form-urlencoded 的 HttpClient POST 请求
【发布时间】：2018-03-24 16:17:36
【问题描述】：

我正在尝试使用 x-www-form-urlencodedcontent 类型标头发出 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 会返回空值？我有什么遗漏吗？

【问题讨论】：

标签： angular

【解决方案1】：

您也可以从对象中加载数据

login(username, password): Observable<any> {
    const body = new HttpParams({
        fromObject: {
            username,
            password,
            ...extraData, // if any 
        }
    });

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

【讨论】：

【解决方案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);

【讨论】：

你在哪里找到的内容？
看起来内容和正文是同义词
HttpParams 是不可变的这一事实让我大吃一惊。花了一段时间才弄清楚为什么它给了一个空的身体。

【解决方案3】：

您可以按照以下方式进行发布请求。

login(email:string, password:string):Observable<User>{
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/x-www-form-urlencoded')
    let params = new HttpParams().set('user', JSON.stringify({email: email,password:password}));
    return this.http.post<User>(`${MEAT_API_AUX}/login`,
    {},{headers: headers,params:params})
        .do(user => this.user = user);
}

之后你必须订阅。

【讨论】：

【解决方案4】：

您将 JSON 数据而不是表单数据发布到 API。下面的 sn-p 应该可以工作。

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')
    }
  );
}

【讨论】：

经过大量搜索后，此解决方案有效！那里有很多使用旧 HttpClient 的旧指南... :) 谢谢！
我只能通过不对主体执行“toString()”来让 Owain 的解决方案发挥作用。
谢谢！我试过到处寻找你的答案
@OwainvanBrakel 我需要在正文中传递一些值，而 .set('month', month) 是这样做的方法
使用 HttpParams 时，Content-Type 标头不是必需的，至少对于 Angular 8 而言。当正文为 HttpParams 时，内容类型似乎默认为 application/x-www-form-urlencoded。