Menambahkan header HTTP ke Angular HttpClient tidak mengirim header, mengapa?

Ini kode saya:

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

dan di sini debug jaringan:

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

dan Data disimpan di 'Minta Payload' tetapi di server saya tidak menerima nilai POST:

print_r($_POST);
Array
(
)

Saya percaya kesalahan berasal dari header yang tidak disetel selama POST, apa yang saya lakukan salah?

Contoh HttpHeaderkelas baru adalah objek yang tidak dapat diubah . Menggunakan metode kelas akan menghasilkan instance baru sebagai hasilnya. Jadi pada dasarnya, Anda perlu melakukan hal berikut:

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

atau

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

Perbarui: menambahkan beberapa header

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

atau

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

Pembaruan: terima peta objek untuk header & params HttpClient

Karena 5.0.0-beta.6 sekarang dimungkinkan untuk melewati pembuatan HttpHeadersobjek dan langsung melewati peta objek sebagai argumen. Jadi sekarang mungkin untuk melakukan hal berikut:

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

Untuk menambahkan beberapa params atau header Anda dapat melakukan hal berikut:

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

atur header http seperti di bawah ini dalam permintaan http Anda

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

Saya berjuang dengan ini untuk waktu yang lama. Saya menggunakan Angular 6 dan saya menemukan itu

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

tidak bekerja. Tapi apa yang berhasil itu

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

lakukan, yang masuk akal ketika Anda menyadari bahwa mereka tidak dapat berubah. Jadi setelah membuat header Anda tidak dapat menambahkannya. Saya belum mencobanya, tapi saya curiga

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

akan bekerja juga.

Saya bersama Angular 8 dan satu-satunya hal yang berhasil bagi saya adalah ini:

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

Dalam manual ( https://angular.io/guide/http ) saya membaca: Kelas HttpHeaders tidak dapat diubah, sehingga setiap set () mengembalikan instance baru dan menerapkan perubahan.

Kode berikut berfungsi untuk saya dengan angular-4:

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

Dalam aplikasi legasi saya, Array.f dari prototipe js, bertentangan dengan Array.from angular yang menyebabkan masalah ini. Saya mengatasinya dengan menyimpan versi Array.from dari angular dan menugaskannya kembali setelah memuat prototipe.

Contoh Angular 8 HttpClient Service dengan Penanganan Kesalahan dan Custom 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)
          )
      }

      ....
      ....

Lihat contoh tutorial lengkap di sini