'text/plain'から 'application/json'までの角度のHTTP投稿要求のコンテンツタイプ

Question

私はPOSTリクエストを使ってサービスからデータを取得しようとしています。しかし、私はヘッダー（TSのコンパイル）またはコンテンツタイプを変更することはできません。私は、コンソールにこのエラーが表示されます。

状態 "：415、" エラー "：" サポートされていないメディアタイプ " "例外"： "org.springframework.web.HttpMediaTypeNotSupportedException"、 "メッセージ"：" コンテンツタイプを "テキスト/平野の下に」

サポートされていない私のコンポーネントのコードです

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：使用したT書式設定が私にプレとして投稿させられないので、彼はスニペットをコードします。

最新のangle 4バージョンを使用してください。 また、サーバーが正しく構成され、jsonデータのみを受け入れる必要があります。 Angular docsの例を試しましたが、どれもうまくいきませんでした。

誰でもどのように動作させるか考えていますか？ ありがとうございます。

Answer 1

利用ヘッダ：あなたはHTTP-config.tsというファイルを作成し、サービス・クラスで

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

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

、コードの下に挿入することができます最善のアプローチとして

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

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

Answer 2

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

（コンポーネント内）

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

希望すること。

Answer 3

あなたの例（およびコメント内）では、角度で提供される2つの異なるhttp実装が混在しています。 '@ angular/common/http'の角度4のHttpClientが利用可能であり、移動するための推奨方法です。角度が5なので、 '@ angular/http'の古いHTTPは廃止予定とマークされています。

次の方法であなたのヘッダーを設定する必要があなたのバックエンドから例外メッセージを防止するために：あなたのコードで「/ HTTP角度@」からすべての依存関係を削除してください

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

を。このモジュールからオブジェクトを使用している限り、コードに問題があります。