Comment ajouter des en-têtes de mon Angulaire de la requête post?

Pour un projet d'école, j'ai besoin de faire une simple page de connexion Angulaire. Lorsqu'une connexion bouton est cliqué, j'ai besoin d'ajouter un en-tête d'Autorisation avec mon post. J'ai créé un serveur et quand je poste mon Autorisation de la valeur à cet arrière-plan avec le facteur, il fonctionne donc rien de mal avec l'arrière-plan. Quand j'essaie de poster le même arrière-plan avec mon frontend il ne fonctionne pas. Quelle est la meilleure façon d'ajouter des en-têtes de votre post? Il semble que les avis sont partagés. C'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 un 400 de réponse d'état et les en-têtes ne sont pas ajoutés.

InformationsquelleAutor Arne Lecoutre | 2017-12-11
  1. 28

    Le deuxième argument passé à HttpClient.post représente la corps de la demande, mais vous êtes en fournissant Headers ici. Celui-ci permet de 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 pour le corps, mais vous voudrez probablement le fait d'inclure la email et password propriétés dans une certaine forme.

    Vous êtes également le mélange Http et HttpClient. Si vous allez utiliser HttpClient (qui est maintenant l'approche recommandée), déposez RequestOptions et Headers en faveur 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 createAuthorizationHeader fonction des besoins d'utilisation et de retourner une instance de HttpHeaders. Cette classe est immuable, afin de append renvoie une nouvel objet chaque fois qu'elle est appelée. Importation HttpHeaders de @angular/common/http.

    InformationsquelleAutor Kirk Larkin
  2. 3

    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);
        }
    )
    • Merci pour la réponse rapide, mais déjà essayé cette solution et ça ne fonctionne pas. Les en-têtes n'est toujours pas ajouté.
    • votre backend doit ressource "Content-Type"
    • la technologie utilisée dans le backend
    InformationsquelleAutor Robert