web-dev-qa-db-fra.com

Angular 5 - Impossible de définir l'en-tête pour HttpClient

J'essaie de faire un appel POST en utilisant HttpClient dans un projet Angular 5, et je souhaite définir l'en-tête:

import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { AuthData }    from './models/auth-data';

@Injectable()
export class AuthService {

    constructor(private http: HttpClient) { }

    auth = (data: AuthData) => {

        var url = "https://.../login";
        var payload = data;
        var headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');
        var options =  {
            headers: headers
        };

        this.http.post(url, payload, options).subscribe();
    }
}

Pour une raison quelconque, le Content-Type en-tête ne semble pas être dans la demande que je fais.

enter image description here

Pourquoi est-ce?

angularangular-httpclient
11
Enrique Moreno Tent

Si je vois correctement, ce que vous nous montrez est une demande de contrôle en amont OPTIONS (CORS), et non une demande réelle POST).

Il devrait y avoir 2 'demandes en question'. La méthode http pour l'une d'elles doit être OPTIONS (celle que vous avez montrée ici, elle s'appelle preflight cors request) et une réelle POST (si le serveur le permet pour votre client). Si l'hôte est différent de locahost:4200, que je suppose, alors vous devez activer les requêtes cors sur votre serveur pour localhost:4200 client.

4
dee zg

Cela a fonctionné pour moi. Au lieu d'ajouter.

 let headers = new HttpHeaders ({
 'Content-Type': 'application/json' 
});
7
Ronald Dsouza

parce que HttpHeaders est immuable, nous devons l'assigner

const _headers = new HttpHeaders();
const headers = _headers.append('Content-Type', 'application/json')
                        .append('...', '...')
                        .append('...', '...');
6
dimson d