Angular 如何使用 HttpClient 發送 header 和正文

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

以下是我的快遞 controller 代碼：

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 的情況下，您可以 hover 將鼠標放在方法上或按 F12，它將為您提供特定方法提供的所有選項。 例如，讓我們探索一下，如果您在 httpclient post 方法上使用 hover，您將能夠看到 -

正如您在上面看到的 http 后第三個參數是選項及其可選參數（？），您可以在第三個參數中包含 header，在您的情況下，您必須發送令牌，所以我們可以在這里發送它：

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

就是這樣，您可以探索其他選項，例如如果您使用 Windows 認證的 API，您必須在其中發送 withCredentials。 此外，如果您想告訴 API 響應類型，默認情況下它將是 json 但如果您想獲得 XML 格式，您也可以提供它。