Angular 5中使用http.post创建API资源时遇无效媒体类型错误

碰到这种请求报错“invalid media type”的情况，我之前帮不少人排查过，大概率是请求头设置不对，或者请求体的序列化出了问题，咱们一步步来解决：

1. 检查Service里的请求头与序列化处理 #

首先看你的employee.service.ts里的saveEmployee方法，这是发送请求的核心：

• 如果你用的是Angular 5推荐的HttpClient模块（4.3+引入的），它默认会帮你把普通对象序列化为JSON，并自动设置Content-Type: application/json，但保险起见还是手动明确设置下更稳妥：

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

@Injectable()
export class EmployeeService {
  constructor(private http: HttpClient) {}

  saveEmployee(employee: any) {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json' // 确保这个头正确匹配API要求
      })
    };
    // 直接传纯对象即可，HttpClient会自动序列化
    return this.http.post('你的API创建资源的URL', employee, httpOptions);
  }
}

• 如果你还在使用旧的Http模块（不推荐，但Angular 5还兼容），那必须手动序列化对象并设置请求头，否则默认会把对象转成表单格式，导致媒体类型不匹配：

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

@Injectable()
export class EmployeeService {
  constructor(private http: Http) {}

  saveEmployee(employee: any) {
    const headers = new Headers({
      'Content-Type': 'application/json'
    });
    // 必须用JSON.stringify把对象转成JSON字符串
    return this.http.post('你的API创建资源的URL', JSON.stringify(employee), { headers });
  }
}

2. 确认组件里传递的请求体是纯数据对象 #

再看Employee.component.ts里的addEmployee函数，别把Angular的表单对象（比如FormGroup）直接传进去，里面包含很多Angular内部属性，序列化后会变成不符合API要求的结构，一定要提取表单的纯值：

addEmployee() {
  // 提取表单的纯数据，而不是直接传this.employeeForm
  const employeeData = this.employeeForm.value;
  this.employeeService.saveEmployee(employeeData).subscribe(
    res => {
      console.log('员工保存成功！', res);
      // 这里可以加重置表单、跳转页面等逻辑
    },
    err => {
      console.error('保存失败：', err);
    }
  );
}

3. 匹配API要求的媒体类型 #

如果上面两步都没问题，那去核对下API文档，有些API会要求特定的Content-Type（比如application/vnd.api+json这类自定义类型），这时候把请求头里的Content-Type改成API要求的值就行。

4. 排查请求体的序列化问题 #

如果你的employee对象里有循环引用、Date对象或者其他不能被JSON序列化的类型，也可能导致请求体异常，进而触发媒体类型错误：

• 对于Date对象，可以手动转成ISO字符串：employee.birthDate = employee.birthDate.toISOString();
• 对于循环引用，要先拆解对象，去掉循环引用的部分再发送请求。

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