Angular9调ASP.NET Web API带参GET请求报415 Unsupported Media Type错误

• 触发场景：Postman测试ASP.NET Web API接口可正常返回，Angular端发起同地址GET请求时，抛出GET localhost:xxxxx/api/card/getFare 415 (Unsupported MediaType)错误。

根本原因 #

1. Angular的HttpClient.get()方法的第二个入参是请求配置对象，而非直接的请求数据。当前代码直接把ComputeFareDTO实例作为第二个参数传入，既没有按规范配置查询参数，也不存在有效的请求体，后端接收到的请求无匹配的媒体类型，直接触发415报错。
2. ASP.NET Web API对复杂类型参数的默认绑定规则是结合请求特征判定来源，由于GET请求本身无请求体承载，只有当Postman将参数拼接到URL查询字符串时，才能临时匹配后端的绑定逻辑，因此可以正常运行。

分步修复方案 #

1. 后端接口调整

给GET接口的复杂类型参数添加[FromUri]标记，明确告知Web API从URL查询字符串中绑定参数值：

[Route("getFare")]
public decimal GetFareMrtTwo([FromUri] ComputeFareDTO comp) 
{
   return GetFare(comp.StationA, comp.StationB);
}

public class ComputeFareDTO
{
    public string StationA { get; set; }
    public string StationB { get; set; }
}

2. Angular端请求调整

修正getFareRequest方法的传参逻辑，把待传递的DTO字段放到请求配置的params字段中，自动拼接为URL查询参数：

getFareRequest(data: ComputeFareDTO): Observable<any> {
  return this.http.get<any>(this.baseUrl + 'api/card/getFare', {
    params: {
      stationA: data.stationA,
      stationB: data.stationB
    }
  });
}

避坑提醒 #

• GET请求禁止通过请求体携带业务数据：HTTP规范不支持GET请求携带有效请求体，多数浏览器、网关、代理服务会直接丢弃这类内容，稳定性极差。
• 不要混淆Angular HttpClient的传参规则：
  • GET/DELETE请求的业务参数，通过配置项的params属性传递，自动拼接为URL查询参数
  • POST/PUT/PATCH请求的业务数据，通过配置项的body属性传递，按设置的序列化规则转为请求体
• 前后端参数字段名保持一致：默认Web API的参数绑定不区分大小写，但如果配置了严格序列化规则，命名不匹配会导致参数绑定失败。

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