web-dev-qa-db-ja.com

angular v5.1.0 HttpClientはヘッダーcontent-typeを設定していません：application / json

Post.apiのヘッダーをapplication.jsonとして設定しようとしています

let options: { headers?: {'Content-Type':'application/json'} }

設定されていません。

angularhttpclient
12
Sopan Zinjurde

新しいHttpClientクラスでcontent-typeを定義するには、次を行う必要があります。

  1. からのインポート @angular/common/http（および@angular/http現在非推奨としてマークされています）
import { HttpClient, HttpHeaders } from '@angular/common/http';
  1. コンストラクターにHttpClientを注入します。
constructor(private http: HttpClient) { }
  1. プライベートフィールドheadersを定義して目的のコンテンツタイプを定義し、optionsを使用して呼び出しで使用するオブジェクトを準備します。
private options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
  1. メソッド内で使用します。
this.http.post('your target url', yourBodyObject, this.options)

ここで、'your target url'とyourBodyObjectは例としてのみ使用され、実際のデータに置き換える必要があります。

15
Luca Ritossa

これに関するセクションはAngular Documentation-おそらく最近追加された：

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

上記の形式を使用してhttpOptionsに応答タイプを追加しようとすると、TypeScriptから警告が表示されていたため、以下を正常に使用します。

let headers = new HttpHeaders({
            'Content-Type': 'application/text'
        });

return this.http.get(url, { responseType: 'text', headers })

ドキュメント リンク

6
Drenai

これをチェックして、

import {Http, Response, Headers, RequestOptions} from "@angular/http";

そして

let headers = new Headers({ 'Content-Type': 'application/json'});     
let options = new RequestOptions({headers: headers});

http呼び出し用。

3
Sopan Zinjurde

ここでこのコードを試してください=>

let header = {'Content-Type':'application/json'}
2
sairam Rentachintala

以下に例を示します。

public _funName( _params ): Observable<void> {
    const headers = new Headers( { 'Content-Type': 'application/json' }  // set your header);
    /* The option withCredentials: true in the code bellow is used with the CORS variables, that is when the REST functions are on another server then Node.js and the Angular2 development application. */

    const options = new RequestOptions( { headers: headers, withCredentials: true } );

    return this.http.post( _yourLink, _params, options )
    .map( this.extractData )
    .catch( this.handleError );
}



public extractData( res: Response ) {
    const body = res.json();
    // const body = res;
    return body || {};
}

public handleError( error: Response | any ) {
    let errMsg: string;
    if ( error instanceof Response ) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify( body );
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error( errMsg );
    return Observable.throw( errMsg );
}

これがお役に立てば幸いです。

1
Elydasian

OPコードスニペット：

let options: { headers?: {'Content-Type':'application/json'} }

type{ headers?: {'Content-Type':'application/json'} }のオプション変数を定義しています。これは有効ですが、必要なものではありません。 :を=に変更して割り当てにし、割り当てに無効な?を削除しました。これは合法であり、OPが試みていたものに最も近く、動作するはずです。

let options = { headers: {'Content-Type':'application/json'} };
0
Adam Fanello

新しいHttpHeadersオブジェクトを作成することにより、Requestヘッダーを定義できます。

HttpHeadersオブジェクトは、本来immutableです。そのため、すべてのヘッダーの詳細を同じ行に設定します。

getUser(name: string, age: string) {
    const params = new HttpParams().set('name', name).set('age', age);

    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Authorization', 'my token');

    return this.http
      .get(`${endPoint}/user`, {
        params,
        headers
      });
  }
0
Veeraragavan
let hdr = {
        'Content-Type': 'application/json'
    };
let options = { headers: hdr };
this.httpClient.post(url, payloadData, options);
0
Karthick Vasu

http.put()を使用している場合は、次のコードを使用してjson/plainテキストを受け取ります。

const httpOpt = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json, text/plain'
  })
};

this.http.put('http://localhost:8080/bookapi/api/book/'+id, JSON.stringify(requestObj), httpOpt);
0
BASANT KUMAR

これは、user.service.ts内でユーザーの詳細を取得する方法です。

インポート：

import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs/Observable'; 
import {Injectable} from '@angular/core';

クラス内の変数の宣言：

@Injectable()
export class UserService {

private httpHeaders = new HttpHeaders().set('Content-Type','application/json');
protected options = {headers: this.httpHeaders,
    search:{}
};

constructor(private http: HttpClient) {

    }

/**
 * getting user details
 * @returns {Observable<any>}
 */
getUser(): Observable<any>{
    return this.http.get('userApi/').catch(err => this.errorHandler(err));
}

/**
 *
 * @param error
 * @returns {any}
 */
errorHandler(error: any): any {
    if (error.status < 400) {
        return Observable.throw(new Error(error.status));
    }
  }
}
0
angular_architect