Type de contenu de requête HTTP angulaire de 'text/plain' à 'application/json'

Question

Je tente d'obtenir des données à partir d'un service à l'aide de la requête POST. Mais je ne peux pas changer les en-têtes (TS ne compile pas) ou le type de contenu. Je reçois cette erreur console:

état ": 415," erreur ":" Type de support non pris en charge " "exception": "org.springframework.web.HttpMediaTypeNotSupportedException", "message":" Type de contenu ' text/plain' non supporté »

est mon code ci-dessous composant

import { Component, OnInit } from '@angular/core'; 
 
import { Http, Headers, Response, URLSearchParams } from '@angular/http'; 
 
import { HttpClient } from '@angular/common/http'; 
 
import 'rxjs/add/operator/map'; 
 

 
@Component({ 
 
    selector: 'app-search', 
 
    templateUrl: './search.component.html', 
 
    styleUrls: ['./search.component.css'] 
 
}) 
 
export class SearchComponent implements OnInit { 
 

 
    searchValue: any = ''; 
 

 
    constructor(private http: HttpClient) { } 
 

 
    getData() { 
 

 
    this.http.post('MY URL', 
 
    JSON.stringify({ 
 
     "q": "Achmea" 
 
    })) 
 
    .subscribe(
 
    data => { 
 
     alert('ok'); 
 
     console.log(data); 
 
    } 
 
    )

NB:. Utilisé t L'extrait de code parce que le formatage ne me laisserait pas poster comme pré.

Utilisation de la dernière version angulaire 4. Le serveur doit également être correctement configuré, n'acceptant que les données json. J'ai essayé les exemples de documents Angular mais aucun d'eux n'a fonctionné.

Quelqu'un at-il une idée de comment le faire fonctionner? Merci d'avance.

Answer 1

Utiliser les en-têtes:

var headers = new Headers({ 
    "Content-Type": "application/json", 
    "Accept": "application/json" 
}); 

this.http.post(this.oauthUrl, JSON.stringify(postData), { 
    headers: headers 
}) 

Answer 2

En tant que meilleure approche, vous pouvez créer un fichier appelé http-config.ts et insérez le code ci-dessous

import {Headers} from '@angular/http'; 

export const contentHeaders = new Headers(); 
contentHeaders.append('Accept', 'application/json'); 
contentHeaders.append('Content-Type', 'application/json'); 

puis dans votre classe de service

import {Http, RequestOptions, Headers, Response} from "@angular/http"; 
@Injectable() 
export class MyService { 
url:string = '<paste your url here>' 
getData(id: string): Observable<any> { 
    let options = new RequestOptions({headers: contentHeaders}); 
    return this.http 
    .get(this.url, options) 
    .map(this.extractData) 
    .catch(this.handleError);} 
} 

dans votre composant

constructor(private myService: MyService){} 

    private subscription: Subscription; 
    getData(popId: string) { 
    this.subscription = this.myService.getData() 
    .subscribe(
    (data: any) => { 
     console.log(data); 
    }, 
    error => { 
     console.log(error); 
    }); 
    } 

espérons que cela aide.

Answer 3

Dans votre exemple (et aussi dans les commentaires) les deux différentes implémentations http fournies par angular sont mélangées. Puisque angulaire 4 HttpClient de '@ angular/common/http' est disponible et est la voie recommandée à suivre. Depuis angulaire 5 l'ancien Http de '@ angular/http' est même marqué comme obsolète.

Afin d'éviter le message d'exception de votre base, vous devez définir vos en-têtes de la manière suivante:

const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8'); 
return this.httpClient.post<T>(this.httpUtilService.prepareUrlForRequest(url), body, {headers: headers}) 
... 

S'il vous plaît supprimer toutes les dépendances de « @ angulaire/http » dans votre code. Tant que vous utilisez des objets de ce module, vous aurez des problèmes avec votre code.