Angular 4调用Web API POST接口报415不支持媒体类型错误求助

兄弟，我太懂这种Postman跑的顺风顺水，一到Angular里就掉链子的憋屈了！415 Unsupported Media Type说白了就是后端不认你发过去的数据格式，大概率是请求头没设对或者数据序列化出了问题，咱一步步来解决：

先搞清楚你用的是哪个HTTP模块 #

Angular 4分两种HTTP模块：老的Http（4.3之前）和新的HttpClient（4.3及以后），处理方式不一样，先对应上你的代码：

情况1：用的是老版Http模块 #

这个模块不会自动帮你序列化数据，也不会自动加Content-Type: application/json，必须手动做这两步！

// 先导入需要的模块
import { Http, Headers, RequestOptions } from '@angular/http';

// 在你的组件/服务里
private getRequestOptions() {
  const headers = new Headers({ 
    'Content-Type': 'application/json' // 必须显式设置这个请求头
  });
  return new RequestOptions({ headers: headers });
}

saveDataToApi(yourData: any) {
  // 必须把对象转成JSON字符串！
  const body = JSON.stringify(yourData);
  const apiUrl = '你的Web API POST地址';
  
  return this.http.post(apiUrl, body, this.getRequestOptions())
    .map(response => response.json())
    .catch(error => {
      console.error('请求失败:', error);
      return Observable.throw(error);
    });
}

这里最容易踩的坑就是忘了转JSON字符串，直接传对象的话，Angular会把它转成form-data格式，后端自然不认，就返回415了。

情况2：用的是新版HttpClient模块 #

这个模块会自动帮你把对象序列化成JSON，也会自动加Content-Type: application/json，但有时候可能因为配置问题失效，咱可以显式确认：

// 导入模块
import { HttpClient, HttpHeaders } from '@angular/common/http';

// 在服务里定义请求配置
private httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json' // 显式声明，确保不会被覆盖
  })
};

saveDataToApi(yourData: any) {
  const apiUrl = '你的Web API POST地址';
  // 直接传对象就行，别手动转JSON！转了反而会出问题
  return this.http.post(apiUrl, yourData, this.httpOptions)
    .subscribe(
      success => console.log('数据保存成功！'),
      error => console.error('请求出错:', error)
    );
}

这里要注意：千万别手动调用JSON.stringify()，否则Angular会把字符串当成普通文本，请求头会变成text/plain，后端照样不认。

再检查后端Web API的配置 #

别光盯着前端，后端也可能有问题！比如你的Web API接口有没有用[FromBody]标记参数？
举个C# Web API的例子：

[HttpPost]
public IHttpActionResult SaveData([FromBody] YourDataModel model)
{
  // 处理数据保存逻辑
  return Ok("保存成功");
}

如果没加[FromBody]，Web API会默认从URL参数里找数据，而不是请求体，自然接不到你发的JSON，也可能返回415错误。

最后排查有没有拦截器搞事情 #

如果你的项目里加了HTTP拦截器，一定要检查拦截器代码，是不是不小心修改了请求头或者请求体？比如有些拦截器会把Content-Type改成multipart/form-data或者其他格式，这也会导致415。

按这几步排查下来，基本就能解决问题了！我之前踩过一模一样的坑，就是老版Http模块忘了转JSON字符串，折腾了半天 😂

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