Angular如何使用HttpClient发送标头和正文

Question

我正在尝试将用户信息和jwt令牌发送到我的服务器，但是当我尝试访问请求正文时服务器正在打印未定义的内容。

以下是我的Angular代码：

  subscribeToPlan(jwtToken: string, stripeId: string): Observable<any> {
    let headers = new HttpHeaders();
    const authroizationToken = 'bearer '.concat(jwtToken);
    const httpBody = new HttpParams();
    const email = this.getEmailfromJwtToken(jwtToken);
    httpBody.set('email', email);
    httpBody.set('stripeId', stripeId);
    headers = headers.append('Authorization', authroizationToken);

    var result = this.http.post<any>(this.subscribeUrl, httpBody, {headers});
    return result;
  }

  getEmailfromJwtToken(jwtToken: string): string {
    var decode = jwtDecode(jwtToken);
    return decode.email;
  }

以下是我的快递控制器代码：

var subscription = require('../models/subscription');

exports.subscribe = function(req, res){
    console.log(req.body.stripeId); ---> undefined
    res.json(req.body);
}

我是Angular的新手。

Answer 1

尝试这种方式：

subscribeToPlan(jwtToken: string, stripeId: string): Observable<any> {
   let headers = new HttpHeaders();
   const authroizationToken = 'bearer '.concat(jwtToken);
   const httpBody = new HttpParams();
   const email = this.getEmailfromJwtToken(jwtToken);

   headers = headers.append('Authorization', authroizationToken);

   let reqBodyObj = {"email":email, "stripeId": stripeId}

   var result = this.http.post<any>(this.subscribeUrl, reqBodyObj, {headers});
   return result;               
}

Answer 2

我可以为您提供该问题的直接答案，但为以后的参考，请始终尝试探索任何内置方法，检查它们在重载中提供了什么，如果您使用的是VS代码或任何编辑器，则可以为您提供帮助，例如，在VS Studio中，您可以将鼠标悬停在方法上或按F12键，它将为您提供特定方法提供的所有选项。让我们探索一下，例如，如果将鼠标悬停在httpclient post方法上，您将能够看到-

如您在http post上面看到的那样，第三个参数是选项及其可选参数（？），您可以在第三个参数中包含标头，在这种情况下，您必须发送令牌，因此我们可以在此处发送它：

 var reqheader=new HttpHeaders();
 reqheader= reqheader.append('Authorization', "Bearer Token");
 this.http.post(url,body,{headers:reqheader});

就是这样，您可以探索其他选项，例如是否使用Windows身份验证的API（必须在其中发送withCredentials）。另外，如果您想告诉API响应类型，默认情况下它将为json，但是如果您要获取XML格式，也可以提供它。