415（不支持的媒体类型）将数据从 angular9 传递到 asp.net web api

Question

I am getting a 415 unsupported media type error when doing a get request with data to my backend API. when testing in postman it's working fine but in angular I cant seem to make it work.

angular

  onExitSelectionChanged(event: MatSelectChange) {
    this.getFare(this.selectedEntry, this.selectedExit);
  }

 getFare(A, B) {
    var stations = new ComputeFareDTO();
    stations.stationA = A;
    stations.stationB = B;

    this.getFareRequest(stations).subscribe(res => {
      this.Fare = res;
    })
  }

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

class ComputeFareDTO implements IComputeFareDTO {
  stationA: string;
  stationB: string;
}

interface IComputeFareDTO {
  stationA: string;
  stationB: string;
}

C#

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

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

its getting an error

GET localhost:xxxxx/api/card/getFare 415 (Unsupported MediaType)

Answer 1

unless otherwise specified, data is sent using Content-Type: application/x-www-form-urlencoded

To solve this issue, make sure that your ASP.NET CORE app accepts application/json by adding [FromBody] attribute before your dto declaration like public decimal GetFareMtrTwo([FromBody] ComputeFareDTO comp) and make sure that your angular client sends data as JSON

Answer 2

this type of sending the request has two errors:

1- programmatic error, that if you are sending some data to server you should send your data in application/JSON body type.

2- conceptual error: If you are fetching something from the server, and you need to send some searchable parameters, you should send them via query string or something like GraphQL. If you are sending some data to the server, you should send them through POST/PUT method.

Anyway you can do something like this: (but its conceptually wrong, because GET requests should not have any BODY):

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

and you can send your post request like this .

NOTE: you should send your body with json format using JSON.stringify method.

The first and wrong solution is my words above:|. But best practice is doing bellow steps:

• Initiate your request with GET method and send parameters through query string
• Write a simple ModelBinder that binds query params to your DTO model.

NOTE: there is no need to stringify your parameters as json in this solution <3.

NOTE: Here you can see how to write a simple model-binder.

Have fun.