web-dev-qa-db-fra.com

angular v5.1.0 HttpClient non défini en-tête type de contenu: application/json

J'essaie de définir l'en-tête de post api comme application.json

let options: { headers?: {'Content-Type':'application/json'} }

mais pas réglé.

angularhttpclient
9
Sopan Zinjurde

Pour définir le type de contenu avec le nouveau HttpClient class, vous devez:

  1. Importer à partir de @angular/common/http (et NON à partir de @angular/http qui est actuellement marqué comme obsolète)
import { HttpClient, HttpHeaders } from '@angular/common/http';
  1. Injectez la HttpClient sur le constructeur:
constructor(private http: HttpClient) { }
  1. Définissez un champ privé headers pour définir le type de contenu souhaité et options pour préparer l'objet que vous utiliserez lors de l'appel:
private options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
  1. Utilisez-le dans votre méthode:
this.http.post('your target url', yourBodyObject, this.options)

où 'your target url' et yourBodyObject sont utilisés uniquement à titre d'exemple et doivent être remplacés par vos données réelles.

10
Luca Ritossa

Il existe une section à ce sujet dans la documentation angulaire - probablement ajoutée assez récemment: 

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

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

TypeScript me donnait des avertissements lorsque j'ai essayé d'ajouter un type de réponse à httpOptions en utilisant le format ci-dessus. J'ai donc utilisé les éléments suivants avec succès: 

let headers = new HttpHeaders({
            'Content-Type': 'application/text'
        });

return this.http.get(url, { responseType: 'text', headers })

Docs lien

6
Drenai

Vérifie ça,

import {Http, Response, Headers, RequestOptions} from "@angular/http";

et

let headers = new Headers({ 'Content-Type': 'application/json'});     
let options = new RequestOptions({headers: headers});

pour un appel Http.

3
Sopan Zinjurde

Essayez ce code ici =>

let header = {'Content-Type':'application/json'}
2
sairam Rentachintala

Voici un exemple:

public _funName( _params ): Observable<void> {
    const headers = new Headers( { 'Content-Type': 'application/json' }  // set your header);
    /* The option withCredentials: true in the code bellow is used with the CORS variables, that is when the REST functions are on another server then Node.js and the Angular2 development application. */

    const options = new RequestOptions( { headers: headers, withCredentials: true } );

    return this.http.post( _yourLink, _params, options )
    .map( this.extractData )
    .catch( this.handleError );
}



public extractData( res: Response ) {
    const body = res.json();
    // const body = res;
    return body || {};
}

public handleError( error: Response | any ) {
    let errMsg: string;
    if ( error instanceof Response ) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify( body );
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error( errMsg );
    return Observable.throw( errMsg );
}

J'espère que cela t'aidera.

1
Elydasian

L'extrait de code OP:

let options: { headers?: {'Content-Type':'application/json'} }

définit une variable d’options de type{ headers?: {'Content-Type':'application/json'} }, qui est valide mais ne correspond pas à ce que vous souhaitez. Changez le : en = pour en faire un affectation et supprimez le ?, qui n'est pas valide pour les affectations. C’est légal, cela se rapproche le plus de ce que le PO essayait et devrait fonctionner:

let options = { headers: {'Content-Type':'application/json'} };
0
Adam Fanello
let hdr = {
        'Content-Type': 'application/json'
    };
let options = { headers: hdr };
this.httpClient.post(url, payloadData, options);
0
Karthick Vasu

Si vous utilisez http.put(), utilisez le code suivant et recevez du texte brut/json:

const httpOpt = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json, text/plain'
  })
};

this.http.put('http://localhost:8080/bookapi/api/book/'+id, JSON.stringify(requestObj), httpOpt);
0
BASANT KUMAR

C’est ainsi que j’obtiens les détails de l’utilisateur dans user.service.ts

Importations:  

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

Déclaration de variables à l'intérieur de la classe: 

@Injectable()
export class UserService {

private httpHeaders = new HttpHeaders().set('Content-Type','application/json');
protected options = {headers: this.httpHeaders,
    search:{}
};

constructor(private http: HttpClient) {

    }

/**
 * getting user details
 * @returns {Observable<any>}
 */
getUser(): Observable<any>{
    return this.http.get('userApi/').catch(err => this.errorHandler(err));
}

/**
 *
 * @param error
 * @returns {any}
 */
errorHandler(error: any): any {
    if (error.status < 400) {
        return Observable.throw(new Error(error.status));
    }
  }
}
0
angular_architect