Angular投稿リクエストにヘッダーを追加するにはどうすればよいですか？

Question

学校のプロジェクトでは、簡単なログインページをAngularで作成する必要があります。ログインボタンをクリックすると私の投稿にAuthorizationヘッダーを追加する必要があります。私はバックエンドを作成しました。私は郵便配達員とそのバックエンドに私の認証値を掲示すると、バックエンドに何も問題はありません。フロントエンドで同じバックエンドに投稿しようとすると、機能しません。投稿にヘッダーを追加する最も良い方法は何ですか？意見が分かれているようです。これは私のコードです：私はそのコードを実行すると

export class LoginComponent{ 
    title = 'Login'; 
    email = ''; 
    password = ''; 
    credentials = ''; 
    basic = ''; 
    constructor(private http:HttpClient){ 

    } 

    createAuthorizationHeader(headers:Headers,basic){ 
     headers.append('Authorization',basic); 
    } 

    login(event){ 
     this.email = (<HTMLInputElement>document.getElementById("email")).value; 
     this.password = (<HTMLInputElement>document.getElementById("password")).value; 
     this.credentials = this.email + ":" + this.password; 
     this.basic = "Basic " + btoa(this.credentials); 
     console.log(this.basic); 
     let headers = new Headers(); 
     headers.append('Content-Type','application/json'); 
     headers.append('Authorization',this.basic); 
     let options = new RequestOptions({headers:headers}); 
     console.log(headers); 
     return this.http.post('http://localhost:8000/api/v1/authenticate',options) 
     .subscribe(
      res =>{ 
       console.log(res); 
      }, 
      err => { 
       console.log(err.message); 
      } 
     ) 
    } 
} 

私は400のステータス応答を取得し、ヘッダが追加されていません。

Answer 1

HttpClient.postは、2番目のパラメータはPOSTリクエストのために体であることを期待役立つかもしれません。あなたの例では、身体としてHeadersを提供していますが、それはあなたが意図したものではありません。あなたは正しくヘッダを提供するために、以下を使用することができます。

return this.http.post('http://localhost:8000/api/v1/authenticate', null, options); 

私は身体のための例でnullを示しましたが、あなたはおそらくそれが何らかの形でemailとpasswordプロパティを含めます。

編集：あなたはHttpとHttpClientを混合しています。 HttpClientを使用する場合は、RequestOptionsとHeadersの値をHttpHeadersにする必要があります。これは次のようになります。

let headers = new HttpHeaders({ 
    'Content-Type': 'application/json', 
    'Authorization': this.basic }); 
let options = { headers: headers }; 

残りのコードは上記と同じです。 createAuthorizationHeader関数はHttpHeadersを使用して返す必要があり、このクラスは不変であり、appendは呼び出されるたびに新しいオブジェクトを返すことに注意することが重要です。

HttpHeadersを@angular/common/httpからインポートする必要があります。

Answer 2

これはあなた

let headers = new Headers(); 
headers.append('Content-Type','application/json'); 
//post data missing(here you pass email and password) 
data= { 
"email":email, 
"password":password 
} 
return this.http.post('http://localhost:8000/api/v1/authenticate',data,{ headers: headers}) 
    .subscribe(
     res =>{ 
      console.log(res); 
     }, 
     err => { 
      console.log(err.message); 
     } 
    )