Thêm một tiêu đề HTTP vào Angular HttpClient không gửi tiêu đề, tại sao?

Đây là mã của tôi:

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

và ở đây gỡ lỗi mạng:

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

và Dữ liệu được lưu trữ trong 'Yêu cầu tải trọng' nhưng trong máy chủ của tôi không nhận được các giá trị POST:

print_r($_POST);
Array
(
)

Tôi tin rằng lỗi xuất phát từ tiêu đề không được đặt trong POST, tôi đã làm gì sai?

Các thể hiện của HttpHeaderlớp mới là các đối tượng bất biến . Gọi các phương thức lớp sẽ trả về một thể hiện mới. Về cơ bản, bạn cần làm như sau:

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

hoặc là

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

Cập nhật: thêm nhiều tiêu đề

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

hoặc là

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

Cập nhật: chấp nhận bản đồ đối tượng cho các tiêu đề & params của httpClient

Vì 5.0.0-beta.6 hiện có thể bỏ qua việc tạo HttpHeadersđối tượng, trực tiếp truyền bản đồ đối tượng làm đối số. Vì vậy, bây giờ có thể làm như sau:

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

Để thêm nhiều thông số hoặc tiêu đề, bạn có thể làm như sau:

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

đặt tiêu đề http như bên dưới trong yêu cầu http của bạn

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

Tôi đã vật lộn với điều này trong một thời gian dài. Tôi đang sử dụng Angular 6 và tôi thấy rằng

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

đã không làm việc. Nhưng những gì đã làm việc là

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

đã làm, điều đó có ý nghĩa khi bạn nhận ra họ là bất biến. Vì vậy, khi tạo một tiêu đề bạn không thể thêm vào nó. Tôi đã không thử nó, nhưng tôi nghi ngờ

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

cũng sẽ làm việc

Tôi đã ở với Angular 8 và điều duy nhất phù hợp với tôi là:

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

Trong hướng dẫn sử dụng ( https://angular.io/guide/http ) tôi đọc: Lớp HttpHeaders là bất biến, vì vậy mọi tập hợp () trả về một thể hiện mới và áp dụng các thay đổi.

Đoạn mã sau hoạt động với tôi với angular-4:

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

Trong ứng dụng kế thừa của tôi Array.from của nguyên mẫu js đã xung đột với Array.from của angular đã gây ra vấn đề này. Tôi đã giải quyết nó bằng cách lưu phiên bản Array.from của angular và gán lại sau khi tải nguyên mẫu.

Ví dụ về Dịch vụ httpClient 8 góc với Xử lý lỗi và Tiêu đề tùy chỉnh

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

      ....
      ....

Kiểm tra hướng dẫn ví dụ đầy đủ ở đây