Angular HttpClient n'envoie pas d'en-tête

Question

Voici mon code:

 import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 

---

 logIn(username: string, password: string) {
    const url = 'http://server.com/index.php';
    const body = JSON.stringify({username: username,
                                 password: password});
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json; charset=utf-8');
    this.http.post(url, body, {headers: headers}).subscribe(
        (data) => {
            console.log(data);
        },
        (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
                console.log('Client-side error occured.');
            } else {
                console.log('Server-side error occured.');
            }
        }
    );
}
 

et ici le débogage du réseau:

 Request Method:POST
Status Code:200 OK
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:46
Content-Type:text/plain
 

et Les données sont stockées dans 'Request Payload' mais sur mon serveur, les valeurs POST ne sont pas reçues:

 print_r($_POST);
Array
(
)
 

Je crois que l'erreur vient de l'en-tête non défini pendant le POST, qu'est-ce qui ne va pas avec ce que j'ai fait?

Answer 1

Le cas de la nouvelle - HttpHeader classe sont immuables objets. Invoquant les méthodes de la classe va renvoyer une nouvelle instance en tant que résultat. Donc, fondamentalement, vous devez effectuer les opérations suivantes:

let headers = new HttpHeaders();
headers = headers.set('Content-Type', 'application/json; charset=utf-8');

ou

const headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8'});

Mise à jour: ajout de plusieurs en-têtes

let headers = new HttpHeaders();
headers = headers.set('h1', 'v1').set('h2','v2');

ou

const headers = new HttpHeaders({'h1':'v1','h2':'v2'});

Mise à jour: accepter objet de la carte pour HttpClient en-têtes & params

Depuis 5.0.0-bêta.6 est maintenant possible d'ignorer la création d'un HttpHeaders objet de passer directement un objet de la carte comme argument. Alors maintenant, il est possible d'effectuer les opérations suivantes:

http.get('someurl',{
   headers: {'header1':'value1','header2':'value2'}
});

Answer 2

Pour ajouter plusieurs paramètres ou en-têtes, vous pouvez procéder comme suit:

 constructor(private _http: HttpClient) {}

//....

const url = `${environment.APP_API}/api/request`;

let headers = new HttpHeaders().set('header1', hvalue1); // create header object
headers = headers.append('header2', hvalue2); // add a new header, creating a new object
headers = headers.append('header3', hvalue3); // add another header

let params = new HttpParams().set('param1', value1); // create params object
params = params.append('param2', value2); // add a new param, creating a new object
params = params.append('param3', value3); // add another param 

return this._http.get<any[]>(url, { headers: headers, params: params })
 

Answer 3

définir les en-têtes http comme ci-dessous dans votre requête http

 return this.http.get(url, { headers: new HttpHeaders({'Authorization': 'Bearer ' + token})
 });
 

Answer 4

J'ai longtemps lutté avec cela. J'utilise Angular 6 et j'ai trouvé que

 let headers = new HttpHeaders();
headers = headers.append('key', 'value');
 

n'a pas marché. Mais qu'est-ce que le travail était

 let headers = new HttpHeaders().append('key', 'value');
 

a fait, ce qui est logique lorsque vous réalisez qu'ils sont immuables. Donc, après avoir créé un en-tête, vous ne pouvez rien y ajouter. Je n'ai pas essayé, mais je soupçonne

 let headers = new HttpHeaders();
let headers1 = headers.append('key', 'value');
 

fonctionnerait aussi.

Answer 5

Dans le manuel ( https://angular.io/guide/http ), j'ai lu: La classe HttpHeaders est immuable, donc chaque set () renvoie une nouvelle instance et applique les modifications.

Le code suivant fonctionne pour moi avec angular-4:

 return this.http.get (url, {en-têtes: new HttpHeaders (). set ('UserEmail', email)});