web-dev-qa-db-fra.com

Comment ajouter des en-têtes à ma demande Angular post?

Pour un projet scolaire, je dois créer une simple page de connexion avec Angular. Quand un bouton de connexion est cliqué, je dois ajouter un en-tête d'autorisation avec mon message. J'ai créé un backend et lorsque je poste ma valeur d'autorisation sur ce backend avec postman, cela fonctionne, donc rien ne cloche avec le backend. Lorsque j'essaie de publier sur le même serveur avec mon serveur, cela ne fonctionne pas. Quel est le meilleur moyen d'ajouter des en-têtes à votre message? Il semble que les opinions sont partagées. Ceci est mon code:

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

Lorsque j'exécute ce code, j'obtiens une réponse d'état 400 et les en-têtes ne sont pas ajoutés.

angulartypescriptangular-httpclient
11
Arne Lecoutre

Le deuxième argument passé à HttpClient.post représente le corps de la demande, mais vous fournissez Headers ici. Utilisez ce qui suit pour fournir les en-têtes correctement:

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

J'ai montré null dans l'exemple du corps, mais vous souhaitez probablement inclure les propriétés email et password sous une forme ou une autre.

Vous mélangez également Http et HttpClient. Si vous utilisez HttpClient (qui est maintenant l'approche recommandée), supprimez RequestOptions et Headers au profit de HttpHeaders . Cela devient:

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

Le reste du code reste le même. Votre fonction createAuthorizationHeader doit utiliser et renvoyer une instance de HttpHeaders. Cette classe est immuable, donc append renvoie un nouvel objet à chaque appel. Importer HttpHeaders de @angular/common/http.

25
Kirk Larkin

Cela peut vous aider

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