1
votes

comment ajouter des en-têtes personnalisés à la requête http en angulaire

J'essaie de faire une requête http get () en passant des valeurs dans les en-têtes , maintenant je remplace les en-têtes comme ceci:

  public async AllCustomers(): Promise<ICustomer[]> {
    const apiUrl = `${this.baseUrl}/courses`;
    const headers = new HttpHeaders();
    headers.append('Authorization', this.authKey);
    headers.append('x-Flatten', 'true');
    headers.append('Content-Type', 'application/json');

    return this.http.get<ICustomer[]>(apiUrl).toPromise();
  }

Quand je remplace les en-têtes comme ceci:

headers: new HttpHeaders ({Authorization: this.authKey})

Les valeurs par défaut des en-têtes (i, e Content-Type: application / json) seront remplacées par les en-têtes ci-dessus.

entrez la description de l'image ici Au lieu de remplacer les en-têtes, comment puis-je ajouter des en-têtes personnalisés , j'ai essayé comme ceci:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {ICustomer} from 'src/app/models/app-models';

@Injectable({
  providedIn: 'root'
})
export class MyService {
private baseUrl = '....api url....';
public authKey = '....auth_key......';

  constructor(private http: HttpClient) { }

  public async AllCustomers(): Promise<ICustomer[]> {
   const apiUrl = `${this.baseUrl}/customers`;

   return this.http.get<ICustomer[]>(apiUrl ,
    {headers: new HttpHeaders({Authorization: this.authKey})}).toPromise();<=====
  }

}

Quel est le problème avec mon approche, je suis nouveau dans angulaire , une aide?

javascript typescript angular node.js rxjs

1 commentaires

Si vous souhaitez envoyer un jeton d'authentification, pourquoi n'utilisez-vous pas un intercepteur http?

3 Réponses :

7
votes

Vous devriez ajouter un en-tête à votre demande d'obtention comme ceci. De plus, étant donné que HttpHeaders est un objet immuable, vous devez réaffecter l'objet d'en-tête

  public async AllCustomers(): Promise<ICourses[]> {
    const apiUrl = `${this.baseUrl}/courses`;
    let headers = new HttpHeaders();
    headers = headers.append('Authorization', this.authKey);
    headers = headers.append('x-Flatten', 'true');
    headers = headers.append('Content-Type', 'application/json');

    return this.http.get<ICourses[]>(apiUrl, {headers}).toPromise();
  }

2 commentaires

J'ai ajouté header pour recevoir la demande comme vous l'avez dit. Vous avez cette erreur ERROR Erreur: Uncaught (promis): HttpErrorResponse: {"headers": {"normalizedNames": {}, "lazyUpdate": null, "headers" ‌: {}}, "status": 401, "s‌ tatusText": "Non autorisé", "url"

Alors votre clé d'authentification est fausse. Vérifiez à nouveau votre clé d'authentification

1
votes

Je pense que vous avez oublié d'ajouter l'objet headers dans la requête

return this.http.get<ICourses[]>(apiUrl, { headers }).toPromise();

return this.http.get<ICourses[]>(apiUrl).toPromise();

0 commentaires

1
votes

import { HttpHeaders } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';


constructor(private _http: HttpClient) { 

}


public getHeaders(): HttpHeaders {
  const headers = new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': `Bearer ${this._auth.token}`
  });
  return headers;
}


public getData() {
  const url     = `https://stackoverflow.com/api/test`;
  const body    = { };
  const options = { headers: this.getHeaders() };
  return this._http.post<any>(url, body, options);
}

0 commentaires