Angular 8 HttpClient发送JSON报415媒体类型不支持问题求助

你遇到的HTTP 415错误核心原因是请求的Content-Type与后端期望不匹配：

当你用JSON.stringify()把请求体转成字符串后，Angular的HttpClient会默认把这个字符串请求体的Content-Type设置为text/plain，但你的ASP.NET Core后端接口应该是期望接收application/json类型的请求，所以返回了"不支持的媒体类型"错误。

修复方案（两种可选，推荐第一种） #

方案1：直接传递JavaScript对象（推荐）

HttpClient内置了对象序列化功能，不需要手动调用JSON.stringify()，直接传入对象的话，它会自动帮你把对象序列化为JSON字符串，同时自动设置正确的Content-Type: application/json请求头。修改后的代码如下：

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

login(username, password) {
  // 直接传入对象，不用JSON.stringify
  return this.http.post<any>(`https://${config.apiUrl}/api/User/LoginUser`, { 
    username: username, 
    password: password 
  }).pipe(map(user => {
    localStorage.setItem('currentUser', JSON.stringify(user));
    console.log(user);
    this.currentUserSubject.next(user);
    return user;
  }));
}

方案2：手动设置Content-Type请求头（如果必须传字符串的情况）

如果你因为某些场景必须手动传递字符串形式的JSON，可以手动添加HttpHeaders指定Content-Type为application/json：

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

login(username, password) {
  const headers = new HttpHeaders({
    'Content-Type': 'application/json'
  });
  
  return this.http.post<any>(
    `https://${config.apiUrl}/api/User/LoginUser`, 
    JSON.stringify({ "username": username, "password": password }),
    { headers: headers } // 传入配置好的请求头
  ).pipe(map(user => {
    localStorage.setItem('currentUser', JSON.stringify(user));
    console.log(user);
    this.currentUserSubject.next(user);
    return user;
  }));
}

额外说明 #

ASP.NET Core的API控制器默认是通过[FromBody]特性绑定JSON请求体的，这个特性要求请求的Content-Type必须是application/json，所以只要前端请求头正确，后端就能正常解析你的参数了。

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