web-dev-qa-db-fra.com

Comment définir correctement l'en-tête de requête HTTP dans Angular 2

J'ai une application Ionic 2 utilisant Angular 2, qui envoie un PUT HTTP à un serveur API ASP.NET Core. Voici la méthode que j'utilise pour envoyer la demande:

public update(student: Student): Promise<Student>
{
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('authentication', `${student.token}`);

    const url = `${this.studentsUrl}`;

    return this.http
        .put(url, JSON.stringify(student), { headers: headers })
        .toPromise()
        .then(() => student)
        .catch(this.handleError);
}

Je suis en train de définir une clé/valeur d'authentification sur l'objet en-tête.

Mais lorsque je reçois cette requête sur le serveur, je ne trouve pas la clé d'authentification dans l'en-tête:

 enter image description here

Comme vous pouvez le voir sur l'image, l'en-tête contient de nombreuses clés, mais pas le contenu ni les clés d'authentification que j'ai ajoutées manuellement à l'en-tête de l'application cliente.

Qu'est-ce que je fais mal?

httpangularangular2-http
33
RBasniak

Votre paramètre pour les options de requête dans http.put () doit en réalité être du type RequestOptions. Essayez quelque chose comme ça:

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('authentication', `${student.token}`);

let options = new RequestOptions({ headers: headers });
return this.http
    .put(url, JSON.stringify(student), options)
58
Paul Jerome Bordallo

Nous pouvons le faire gentiment en utilisant Interceptors . Vous n'avez pas à définir les options de tous vos services ne gèrent pas toutes vos réponses d'erreur, il suffit de définir 2 intercepteurs (un pour faire quelque chose avant d'envoyer la demande au serveur et un pour faire quelque chose avant d'envoyer la réponse du serveur à votre service)

  1. Définissez une classe AuthInterceptor pour qu'elle fasse quelque chose avant d'envoyer la demande au serveur. Vous pouvez définir le jeton api (à récupérer dans localStorage, voir étape 4) et d'autres options de cette classe.
  2. Définissez une classe responseInterceptor à faire avant d'envoyer la réponse du serveur à votre service (httpClient). Vous pouvez gérer la réponse de votre serveur. L’utilisation la plus courante est de vérifier si le jeton de l’utilisateur est valide (si ce n’est pas effacer le jeton de localStorage et le rediriger vers la connexion).

  3. Dans votre app.module, importez HTTP_INTERCEPTORS à partir de '@ angular/common/http'. Ajoutez ensuite les intercepteurs à vos fournisseurs (AuthInterceptor et responseInterceptor). Ce faisant, votre application prendra en compte les intercepteurs dans tous nos appels httpClient.

  4. Lors de la connexion à la réponse http (utilisez le service http), enregistrez le jeton sous localStorage.

  5. Ensuite, utilisez httpClient pour tous vos services apirest.

Vous pouvez vérifier quelques bonnes pratiques sur mon projet Github ici

 enter image description here

2
Daniel Eduardo Delgado Diaz

Cela devrait être facilement résolu en important des en-têtes depuis Angular:

import { Http, Headers } from "@angular/http";
2
Isto Barton

Pour nous, nous avons utilisé une solution comme celle-ci:

this.http.get(this.urls.order + '&list', {
        headers: {
            'Cache-Control': 'no-cache',
        }
    }).subscribe((response) => { ...

Référence ici

1
cjohansson

Vous avez une faute de frappe. 

Modification:headers.append('authentication', ${student.token});

To:headers.append('Authentication', student.token);

NOTE le Authentication est en majuscule

0
theCrab