web-dev-qa-db-fra.com

Type de contenu de demande de publication http angulaire de 'text/plain' à 'application/json'

J'essaie d'obtenir des données d'un service en utilisant la demande 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 dans la console:

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

Ci-dessous, le code de mon 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: J'ai utilisé l'extrait de code car le formatage ne me permettait pas de poster en tant que pré.

En utilisant la dernière version angulaire 4 . Le serveur doit également être correctement configuré, acceptant uniquement les données json . J'ai essayé les exemples de la documentation angulaire, mais aucun d’entre eux n’a fonctionné.

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

angularhttppostrequest
4
raulicious

Dans votre exemple (et également dans les commentaires), les deux implémentations http différentes fournies par angular sont mélangées. Étant donné que 4 HttpClient angulaire de '@ angular/common/http' est disponible et qu’il est recommandé de procéder ainsi. Depuis angular 5, l’ancien Http de '@ angular/http' est même marqué comme obsolète.

Afin d'éviter le message d'exception de votre backend, 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})
...

Supprimez toutes les dépendances de "@ angular/http" dans votre code. Tant que vous utilisez des objets de ce module, vous aurez des problèmes avec votre code.

5
marco birchler

La meilleure approche consiste à créer un fichier nommé http-config.ts et à insérer 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);
    });
  }

j'espère que cela pourra aider.

2
VithuBati

Je l'ai obtenu avec httpClient et le code ci-dessous:

const postUrl = this.config.baseUrl + '/Save/' + username;
    const headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    return this.http.post<string>(postUrl, '', {headers: headers});
0
HSG

Utilisez 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
})
0
Vincent Floriot