Angular中HttpClient.post请求Headers类型不兼容报错求助

这个问题我太熟了！你踩的是Angular新旧HTTP模块混用的坑：你用的是@angular/common/http里的现代HttpClient，但请求头却用了@angular/http里的旧版Headers类，这俩完全不兼容——HttpClient只认它专属的HttpHeaders或者普通键值对对象，自然会报类型不匹配的错误。

几步就能搞定： #

• 第一步：删掉旧的Headers导入
  直接移除代码里的import { Headers } from '@angular/http';，我们不需要旧模块的东西了。
• 第二步：改用HttpHeaders创建请求头
  用@angular/common/http自带的HttpHeaders来构建请求头，有两种简洁的写法可选。
• 第三步：简化响应处理（可选但推荐）
  从Angular 6开始，HttpClient的post方法默认会自动把响应解析成JSON，所以不需要再调用res.json()了；如果你的项目是老版本，这一步可以灵活保留。

修正后的完整代码： #

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

@Injectable() 
export class DataproviderProvider { 
  constructor(public http: HttpClient) { 
    console.log('Hello DataproviderProvider Provider'); 
  } 

  // 注册用户方法
  resgisterData(registerdata) { 
    // 写法1：用HttpHeaders实例构建（适合多请求头场景）
    let headers = new HttpHeaders().set('Content-Type', 'application/json');
    // 写法2：直接传入键值对对象（简洁版，适合单请求头）
    // let headers = { 'Content-Type': 'application/json' };

    // 别忘了加return，不然调用方没法订阅响应
    return this.http.post('http://localhost:3000/api/contact', registerdata, { headers })
      .map(res => res); 
  } 
}

额外提醒：如果你的项目已经升级到Angular 6+，建议把rxjs的操作符导入改成新的格式（比如import { map } from 'rxjs/operators';），不过这属于优化项，不影响当前错误的修复。

内容的提问来源于stack exchange，提问作者user9705886