Ionic 3 + Angular 5 POST请求报错求助：媒体类型'text/plain'不被支持

我太懂你这种明明按思路调整了却还是报错的挫败感了！咱们一步步拆解这个问题，从前端到后端逐个排查：

一、先盯紧前端请求的细节（从你的package.json看是Ionic项目） #

你说已经设置了Content-Type，但很可能是请求体格式没转对，导致即使Header设了JSON，实际发送的还是纯文本。

正确的前端请求示例（Angular/Ionic HttpClient） #

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

// 定义请求头，明确指定JSON类型
const requestHeaders = new HttpHeaders({
  'Content-Type': 'application/json'
});

// 要提交的实体数据
const employeePayload = {
  name: "Satinder",
  position: "Engineer"
};

// 发送请求时，务必用JSON.stringify把对象转成JSON字符串！
this.http.post('/api/employees', JSON.stringify(employeePayload), { headers: requestHeaders })
  .subscribe(
    res => console.log("提交成功:", res),
    err => console.error("请求失败:", err)
  );

⚠️ 重点：如果直接传JavaScript对象而不转成JSON字符串，很多情况下浏览器会自动把Content-Type设为text/plain，这就是报错的根源！

二、检查ASP.NET Web API端的配置 #

如果前端请求没问题，那就要看后端是否正确启用了JSON格式化支持：

1. .NET Core 项目（Startup.cs） #

确保在ConfigureServices里正确配置了Controllers和JSON选项：

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers()
        .AddJsonOptions(options =>
        {
            // 可选：保持模型属性名和JSON字段大小写一致（避免序列化时自动转驼峰）
            options.JsonSerializerOptions.PropertyNamingPolicy = null;
        });
}

2. .NET Framework 项目（WebApiConfig.cs） #

要主动添加JSON格式化器，并确保它支持application/json类型：

public static void Register(HttpConfiguration config)
{
    // 启用JSON格式化，并添加支持的媒体类型
    config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new System.Net.Http.Headers.MediaTypeHeaderValue("application/json"));
    
    // 如果不需要XML格式，可以移除XML格式化器，避免干扰
    config.Formatters.Remove(config.Formatters.XmlFormatter);
}

3. 控制器Action的参数要正确 #

别用string类型接收请求体，一定要用强类型模型，并且加上[FromBody]特性（虽然默认是FromBody，但明确写上更稳妥）：

[HttpPost]
[Route("api/employees")]
public IHttpActionResult AddEmployee([FromBody] EmployeeModel employee)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
    
    // 这里写你的数据存储逻辑
    return Ok("员工信息提交成功");
}

// 对应的模型类
public class EmployeeModel
{
    public string Name { get; set; }
    public string Position { get; set; }
}

如果用string接收，Web API会默认把请求体识别为text/plain，自然会报错。

三、用测试工具验证请求 #

如果上面两步都排查完还是有问题，建议用Postman或者Fiddler直接发送请求测试：

• 请求方法：POST
• 请求头：Content-Type: application/json
• 请求体：

{
  "Name": "Satinder singh",
  "Position": "Senior Developer"
}

如果工具发送能成功，说明问题肯定在前端代码的请求配置上；如果工具发送也报错，那就要检查Web API的路由、模型验证或者服务器配置了。

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