web-dev-qa-db-ja.com

Angular http post request content type from 'text / plain' to 'application / json'

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

status "：415、" error "：" Unsupported Media Type "、" exception "：" org.springframework.web.HttpMediaTypeNotSupportedException "、" message "："コンテンツタイプ 'text/plain'はサポートされていません "

以下は私のコンポーネントコードです。

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

注：書式設定では事前に投稿できないため、コードスニペットを使用しました。

最新のangular 4バージョンを使用します。サーバーも正しく構成され、jsonデータのみを受け入れます。Angular docsの例を試しましたが、どれも機能しませんでした。

誰でもそれを機能させる方法について何か考えがありますか？前もって感謝します。

angularhttppostrequest
7
raulicious

あなたの例では（そしてコメントでも）angularによって提供される2つの異なるhttp実装が混同されています。angular 4からHttpClientから '@angular/common/http 'が利用可能であり、推奨される方法です。angular 5なので、' @ angular/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})
...

コードの「@ angular/http」からすべての依存関係を削除してください。このモジュールのオブジェクトを使用している限り、コードに問題があります。

9
marco birchler

最善の方法として、http-config.tsというファイルを作成し、コードの下に挿入することができます

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

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

その後、あなたのサービスクラスで

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

お役に立てば幸いです。

2
VithuBati

私はそれをhttpClientと以下のコードで動作させました：

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

ヘッダーを使用：

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

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

同様の問題があり、HttpInterceptorを使用して回避することができました。以下の例では、コンテンツタイプが「text/plain」のHttpリクエストを探し、タイプを「application/json」に変換し、ボディのjsonを変換します。他のコンテンツタイプはそのままにしておく必要があります。

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ContentTypeInterceptor implements HttpInterceptor {

  public constructor() {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const ct = req.detectContentTypeHeader();
    return ct != null && ct.startsWith('text/plain')
        ? next.handle(req.clone({
                setHeaders: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(req.body)
            }))
        : next.handle(req);
  }
}

ところで、実際の実装では、ホワイトリスト（つまりapi）を使用したので、意図していないリクエストを誤って変更していません！

0
Jaron