it-swarm.com.de

Angular HttpClient sendet keinen Header

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-Debugging:

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 Werte für POST nicht empfangen:

print_r($_POST);
Array
(
)

Ich glaube, der Fehler kommt von der Kopfzeile, die während des POST nicht gesetzt wurde. Was ist mit meiner Tat falsch?

100
Frennetix

Die Instanzen der neuen HttpHeader-Klasse sind immutable -Objekte. Beim Aufruf von Klassenmethoden wird eine neue Instanz als Ergebnis zurückgegeben. Im Grunde 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: Mehrere Header hinzufügen

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 jetzt möglich, die Erstellung eines HttpHeaders-Objekts zu überspringen und eine Objektzuordnung direkt als Argument zu übergeben. So ist es jetzt möglich, Folgendes zu tun:

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

Um mehrere Parameter oder Header hinzuzufügen, haben Sie folgende Möglichkeiten:

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

setzen Sie die http-Header in Ihrer http-Anfrage wie folgt

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

Im Handbuch ( https://angular.io/guide/http ) habe ich gelesen: .__ Die HttpHeaders-Klasse ist unveränderlich, sodass jedes set () eine neue Instanz zurückgibt und die Änderungen anwendet.

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

 return this.http.get (url, {headers: new HttpHeaders (). set ('UserEmail', E-Mail)}); 
0
Rob Lassche

In meiner älteren App stand Array.fr aus dem Prototyp js in Konflikt mit eckigen Array.from, das dieses Problem verursachte. Ich habe das Problem gelöst, indem ich die Array.from-Version von Angle gespeichert und nach dem Laden des Prototyps neu zugewiesen habe.

0
Avinash Wable

Angular 8 HttpClient Service-Beispiel mit Fehlerbehandlung und Benutzerdefinierte Kopfzeile

    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

Vollständiges Beispiel-Tutorial ansehen hier

0
Code Spy

Ich hatte lange Zeit damit zu kämpfen. Ich verwende 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 man merkt, dass sie unveränderlich sind. Nachdem Sie einen Header erstellt haben, können Sie ihn nicht hinzufügen. Ich habe es nicht probiert, aber ich vermute

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

würde auch funktionieren.

0
Martin Horton