Durch Hinzufügen eines HTTP-Headers zum Angular HttpClient wird der Header nicht gesendet. Warum?

Hier ist mein 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.');
            }
        }
    );
}

und hier das Netzwerk-Debug:

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

und Daten werden in 'Request Payload' gespeichert, aber auf meinem Server wurden die POST-Werte nicht empfangen:

print_r($_POST);
Array
(
)

Ich glaube, der Fehler kommt von dem Header, der während des POST nicht gesetzt wurde. Was habe ich falsch gemacht?

Die Instanzen der neuen HttpHeaderKlasse sind unveränderliche Objekte. Das Aufrufen von Klassenmethoden gibt als Ergebnis eine neue Instanz zurück. Grundsätzlich müssen Sie also Folgendes tun:

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

oder

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

Update: Hinzufügen mehrerer Header

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

oder

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

Update: Objektzuordnung für HttpClient-Header und -Parameter akzeptieren

Seit 5.0.0-beta.6 ist es nun möglich, die Erstellung eines HttpHeadersObjekts zu überspringen und eine Objektzuordnung direkt als Argument zu übergeben. Jetzt ist es also möglich, Folgendes zu tun:

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

Um mehrere Parameter oder Header hinzuzufügen, können Sie Folgendes tun:

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

Stellen Sie http-Header wie unten in Ihrer http-Anfrage ein

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

Ich hatte lange damit zu kämpfen. Ich benutze Angular 6 und habe das gefunden

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

funktioniert nicht. Aber was hat funktioniert?

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

tat, was Sinn macht, wenn Sie erkennen, dass sie unveränderlich sind. Nachdem Sie einen Header erstellt haben, können Sie ihn nicht hinzufügen. Ich habe es nicht versucht, aber ich vermute

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

würde auch funktionieren.

Ich war bei Angular 8 und das einzige, was für mich funktionierte, war Folgendes:

  getCustomHeaders(): HttpHeaders {
    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Api-Key', 'xxx');
    return headers;
  }

Im Handbuch ( https://angular.io/guide/http ) habe ich gelesen: Die HttpHeaders-Klasse ist unveränderlich, daher gibt jedes set () eine neue Instanz zurück und wendet die Änderungen an.

Der folgende Code funktioniert für mich mit Angular-4:

 return this.http.get (url, {headers: new HttpHeaders (). set ('UserEmail', email)});

In meiner Legacy-App stand Array.from des Prototyps js in Konflikt mit Array.from von Angular, das dieses Problem verursachte. Ich habe es behoben, indem ich die Array.from-Version von Angular gespeichert und nach dem Laden des Prototyps neu zugewiesen habe.

Beispiel für einen Angular 8 HttpClient- Dienst mit Fehlerbehandlung und benutzerdefiniertem Header

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

      ....
      ....

Das vollständige Beispiel-Tutorial finden Sie hier