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

181

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?

Frennetix
sumber
Ya terima kasih! Tetapi setelah tidak menerima data di Back-end saya, saya pergi ke application / x-www-form-urlencoded. Pokoknya pertanyaan utamanya adalah pelamar
Frennetix
Lihat contoh HTTPClient 8 Angular ini untuk mengonsumsi RESTFul API dengan header khusus dan Penanganan Kesalahan freakyjolly.com/...
Code Spy

Jawaban:

310

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'}
});
Jota.Toledo
sumber
50
Menarik. Jadi, bagi kami yang berasal dari dunia OO, setnama metode agak menyesatkan.
tishma
3
Bagaimana jika saya ingin mengatur beberapa header? Saya sudah mencoba untuk rantai komentar HttpHeaders().set(..).set(..)tetapi sekarang lagi header tidak ditulis ke bidang header HTTP ?!
displayname
Seharusnya berfungsi dengan baik sesuai dengan src github.com/angular/angular/blob/master/packages/common/http/src/… . Saya tidak dapat membantu Anda lebih jauh tanpa informasi lebih lanjut tentang masalah Anda (kode)
Jota.Toledo
Jadi dalam kasus saya, saya membuat kesalahan dengan mengganti header & params dalam daftar argumen ke fungsi (karena keduanya menerima objek json). Artinya hanya berhati-hati terhadap kesalahan, dan HttpHeaders sebagai tipe adalah praktik yang baik setelah semua. Di luar topik: ketika Anda dapat menggunakan objek di mana saja, jangan gunakan TypeScript tetapi VanillaJS.
hazard89
3
Mengapa tajuk dan permintaan dibuat tidak berubah? angular.io/guide/http#immutability
Drellgor
23

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 })
Hallyson Henrique
sumber
1
Metode ini juga tampaknya tidak berhasil. Maksud saya, Anda dapat menambahkan header, dan mereka akan ditampilkan di lazyUpdateproperti, tetapi pada akhirnya akan macet dengan CreateListFromArrayLikepengecualian ketika membuat permintaan efektif dengan berlangganan.
Jago
3
Untuk menambahkan beberapa tajuk gunakan: tajuk: HttpHeaders = new HttpHeaders ({'Application-Id': this.appId, "REST-API-Key": this.apiKey, "Tipe-Konten": "application / json"});
Benson
13

atur header http seperti di bawah ini dalam permintaan http Anda

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

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.

Martin Horton
sumber
Upaya pertama Anda harus berhasil, Anda menugaskan hasil menambahkan ke variabel header. Saat ini penjelasan Anda tidak masuk akal, khususnya dugaan terakhir Anda bahwa menambahkan let dapat memperbaikinya
Juan Mendes
3

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;
  }
Raghav
sumber
2

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)});
Rob Lassche
sumber
0

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.

Avinash Wable
sumber
-3

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

      ....
      ....

masukkan deskripsi gambar di sini

Lihat contoh tutorial lengkap di sini

Kode Mata-mata
sumber
3
Apakah ini saya atau ini agak berlebihan untuk pertanyaan yang diajukan?
Ojonugwa Jude Ochalifu
3
Ini tidak berusaha menjawab pertanyaan OP. Hanya sekelompok kode tanpa penjelasan apa pun.
Jota.Toledo