wake-up-neo.com

Angular http post request-Inhaltstyp von 'text/plain' bis 'application/json'

Ich versuche, Daten von einem Dienst mit POST anzufordern. Ich kann aber nicht die Header (TS wird nicht kompilieren) oder den Inhaltstyp ändern. Ich erhalte diesen Fehler in der Konsole:

status ": 415," error ":" Nicht unterstützter Medientyp "," Ausnahme ":" org.springframework.web.HttpMediaTypeNotSupportedException "," message ":" Inhaltstyp 'text/plain' nicht unterstützt "

Unten ist mein Komponentencode.

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: Ich habe das Code-Snippet verwendet, da mich die Formatierung nicht als pre posten würde.

Die neueste Version von Winkel 4 verwenden ..__ Auch der Server sollte korrekt konfiguriert sein und nur Json-Daten akzeptieren . Ich habe die Beispiele aus Angular docs ausprobiert, aber keines davon hat funktioniert.

Hat jemand eine Idee, wie man es zum Laufen bringt ?? Vielen Dank im Voraus.

angularhttppostrequest
4
raulicious

In Ihrem Beispiel (und auch in den Kommentaren) werden die zwei verschiedenen http-Implementierungen, die von angle bereitgestellt werden, durcheinandergebracht. Da eckig 4 ​​HttpClient von '@ angle/common/http' zur Verfügung steht, ist dies der empfohlene Weg. Seit eckig 5 ist der ältere HTTP-Wert von '@ angle/http' sogar als veraltet markiert.

Um die Ausnahmemeldung von Ihrem Backend zu verhindern, müssen Sie Ihre Header folgendermaßen einstellen: 

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

Bitte entfernen Sie alle Abhängigkeiten von '@ angle/http' in Ihrem Code. Solange Sie Objekte aus diesem Modul verwenden, haben Sie Probleme mit Ihrem Code.

5
marco birchler

Als beste Lösung können Sie eine Datei namens http-config.ts erstellen und den folgenden Code einfügen 

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

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

dann in Ihrer Serviceklasse 

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);}
 }

in Ihrer Komponente

   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);
    });
  }

hoffentlich hilft das.

2
VithuBati

Ich habe es mit dem httpClient und dem Code unten arbeiten lassen:

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

Kopfzeilen verwenden:

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

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