web-dev-qa-db-ja.com

Angularリクエストの送信にヘッダーを追加するには？

学校のプロジェクトでは、Angularで簡単なログインページを作成する必要があります。ログインボタンをクリックすると、投稿にAuthorizationヘッダーを追加する必要があります。バックエンドを作成し、Postmanを使用してそのバックエンドに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ステータスの応答が返され、ヘッダーは追加されません。

angulartypescriptangular-httpclient
11
Arne Lecoutre

HttpClient.post に渡される2番目の引数は、リクエストのbodyを表しますが、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は、呼び出されるたびに新しいオブジェクトを返します。 @angular/common/httpからHttpHeadersをインポートします。

25
Kirk Larkin

これはあなたを助けるかもしれません

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);
        }
    )
2
Robert