Angular5调用Spring POST API触发415媒体类型不支持错误

嘿，我一眼就看出问题所在了——你踩了Angular HttpHeaders 的一个经典坑！

问题根源 #

Angular的 HttpHeaders 是不可变对象，调用 append() 方法不会修改原headers实例，而是返回一个全新的实例。你原来的代码里只是调用了 headers.append('Content-Type', 'application/json')，但没有把返回值赋值给变量，导致实际发送的请求根本没带上这个请求头！

同时，你手动用 JSON.stringify() 把请求体转成了字符串，Angular看到请求体是字符串类型，会默认把 Content-Type 设置为 text/plain，这就和Spring后端要求的 application/json 不匹配，直接触发了415错误。

解决方案 #

有两种修复方式，推荐第二种更简洁的：

方式1：正确使用HttpHeaders

如果坚持手动设置headers，一定要接收 append() 的返回值：

postProject(project: Project) {
  // 注意这里用let而不是const，因为要重新赋值
  let headers = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/json');
  // 或者直接用构造函数初始化，更简洁
  // const headers = new HttpHeaders({'Content-Type': 'application/json'});
  
  return this.http.post('http://localhost:8443/projects', project.body(), {headers})
    .pipe(map(response => response)); // Angular 5中map操作符需要包裹在pipe里
}

方式2：让HttpClient自动处理（推荐）

Angular的 HttpClient 会自动帮你把JavaScript对象序列化为JSON，并且自动设置 Content-Type: application/json 请求头，完全不需要手动处理！

首先修改你的 body() 方法，返回对象而不是字符串：

body() {
  return {
    id: this.id,
    name: this.name,
    'num_execs': this.num_execs
  };
}

然后简化post方法：

postProject(project: Project) {
  // 直接传对象，HttpClient会自动处理序列化和请求头
  return this.http.post('http://localhost:8443/projects', project.body())
    .pipe(map(response => response));
}

验证 #

这样修改后，你的请求会正确带上 Content-Type: application/json，Spring后端的 @RequestBody 就能正常解析请求体，415错误也就消失了。

内容的提问来源于stack exchange，提问作者Carlos Vázquez Losada