web-dev-qa-db-fra.com

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

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?

angularhttp-headersangular-httpclient
100
Frennetix

Les instances de la nouvelle classe HttpHeader sont des objets immutable. L'appel de méthodes de classe renverra une nouvelle instance comme résultat. Donc, fondamentalement, vous devez procéder comme suit:

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

Update: 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'});

Update: accepte la mappe d'objets pour les en-têtes et les paramètres HttpClient

Depuis 5.0.0-beta.6 il est maintenant possible de sauter la création d'un objet HttpHeaders et de passer directement une mappe d'objet en tant qu'argument. Alors maintenant, il est possible de faire ce qui suit:

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

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 })
15
Hallyson Henrique

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

Dans le manuel ( https://angular.io/guide/http ), je lis: La classe HttpHeaders étant immuable, 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)});
0
Rob Lassche

Dans mon application héritée Array.from du prototype js était en conflit avec Array.from d'angular qui était à l'origine de ce problème. Je l'ai résolu en sauvegardant la version Array.from d'angular et en la réaffectant après le chargement du prototype.

0
Avinash Wable

Angular 8 HttpClient Exemple de service avec Gestion des erreurs et en-tête personnalisé 

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
    import { Student } from '../model/student';
    import { Observable, throwError } from 'rxjs';
    import { retry, catchError } from 'rxjs/operators';

    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {

      // API path
      base_path = 'http://localhost:3000/students';

      constructor(private http: HttpClient) { }

      // Http Options
      httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }

      // Handle API errors
      handleError(error: HttpErrorResponse) {
        if (error.error instanceof ErrorEvent) {
          // A client-side or network error occurred. Handle it accordingly.
          console.error('An error occurred:', error.error.message);
        } else {
          // The backend returned an unsuccessful response code.
          // The response body may contain clues as to what went wrong,
          console.error(
            `Backend returned code ${error.status}, ` +
            `body was: ${error.error}`);
        }
        // return an observable with a user-facing error message
        return throwError(
          'Something bad happened; please try again later.');
      };


      // Create a new item
      createItem(item): Observable<Student> {
        return this.http
          .post<Student>(this.base_path, JSON.stringify(item), this.httpOptions)
          .pipe(
            retry(2),
            catchError(this.handleError)
          )
      }

      ....
      ....

enter image description here

Voir le tutoriel complet complet ici

0
Code Spy

J'ai lutté avec cela pendant longtemps. 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.

0
Martin Horton