angular v5.1.0 HttpClient未设置标题内容类型：application/json

我正在尝试将post api的标题设置为application.json

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

但未设置。

在此处尝试此代码=>

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

看看这个

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

及

用于Http调用。

以下是一个示例：

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

public\u funName（\u参数）：可观察{
const headers=新的头（{'Content Type'：'application/json'}//设置头）；
/*下面代码中的选项withCredentials:true与CORS变量一起使用，即当REST函数位于另一台服务器上时，然后是Node.js和Angular2开发应用程序*/
const options=newrequestoptions（{headers:headers，withCredentials:true}）；
返回此.http.post（_yourLink，_params，options）
.map（this.extractData）
.接住（这个.把手错误）；
}
公共数据（res:Response）{
const body=res.json（）；
//const body=res；
返回体| |{}；
}
公共句柄错误（错误：响应|任意）{
让errMsg:string；
if（响应的错误实例）{
const body=error.json（）；
const err=body.error | | JSON.stringify（body）；
errMsg=`${error.status}-${error.statusText | |'''}${err}`；
}否则{
errMsg=error.message？error.message:error.toString（）；
}
控制台错误（errMsg）；
返回可观察抛出（errMsg）；
}

---

我希望这将对您有所帮助。

要使用新的HttpClient类定义内容类型，您需要：

从

@angular/common/http

导入（而不是从当前标记为不推荐的

@angular/http

导入）

从'@angular/common/http'导入{HttpClient，HttpHeaders}；

在构造函数上注入

HttpClient

：

构造函数（私有http:HttpClient）{

定义专用字段

标题

以定义所需的内容类型，并定义

选项

以准备调用时使用的对象：

private options={headers:new-HttpHeaders（）.set（'Content-Type'，'application/json'）}；

在您的方法中使用它：

this.http.post（'your target url'，yourBodyObject，this.options）

---

其中，

“您的目标url”

和

您的BodyObject

仅用作示例，需要替换为您的真实数据。

在Angular文档中有一个关于此的部分-可能是最近添加的：

从'@angular/common/http'导入{HttpHeaders}；
常量httpOptions={
标题：新的HttpHeaders({
“内容类型”：“应用程序/json”，
“授权”：“我的身份验证令牌”
})
};

当我尝试使用上述格式向httpOptions添加响应类型时，TypeScript向我发出警告，因此我成功地使用了以下内容：

let headers=新的HttpHeaders({
“内容类型”：“应用程序/文本”
});
返回此.http.get（url，{responseType:'text'，headers}）

文档

操作代码片段：

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

正在定义类型为

{headers？：{'Content-type'：'application/json'}}

的选项变量，该变量有效，但不是您想要的。将

：

更改为

=

以使其成为作业，并删除了对作业无效的

？

。这是合法的，最接近OP的尝试，应该有效：

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

---

如果您使用的是

http.put（）

，则使用以下代码并接收json/纯文本：

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

---

这就是我在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));
    }
  }
}

@Injectable（）
导出类用户服务{
private-httpHeaders=new-httpHeaders（）.set（'Content-Type'，'application/json'）；
受保护的选项={headers:this.httpHeaders，
搜索：{}
};
构造函数（专用http:HttpClient）{
}
/**
*获取用户详细信息
*@returns{Observable}
*/
getUser（）：可观察{
返回this.http.get（'userApi/'）.catch（err=>this.errorHandler（err））；
}
/**
*
*@param错误
*@returns{any}
*/
errorHandler（错误：any）：any{
如果（错误状态<400）{
返回Observable.throw（新错误（Error.status））；
}
}
}

我们可以通过创建新的HttpHeaders对象来定义请求头

HttpHeaders对象本质上是不可变的。因此，在同一行中设置所有标题详细信息

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

---

您提供的导入是针对“Http”而不是“HttpClient”类的。此示例是针对“Http”类的，而不是针对“HttpClient”@MarkHim请不要添加不尊重的无用注释，如“代码格式”。直接回答。

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

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