Search code examples
c#angularjsjsonasp.net-web-apiasp.net-core

Unsupported media type ASP.NET Core Web API


On the front-end i use Angular to collect som data from the form and send it to my server-side controllers. As the image shows below, i get the data ($scope.newData) on my controller and service, but when it reaches the server, i get the following error: "Unsupported media type" and my newData is empty.

Website console

My controller:

// Create new salesman
  $scope.addSalesman = function (newData) {
    console.log("Controller");
    console.log($scope.newData);
    myService.addNewSalesman($scope.newData).then(function (data) {
      console.log(data);
    }, function (err) {
      console.log(err);
    });
  };

My service:

addNewSalesman: function (newData) {
            console.log("service");
            console.log(newData)
            var deferred = $q.defer();
            $http({
                method: 'POST',
                url: '/api/Salesman',
                headers: { 'Content-type': 'application/json' }
            }, newData).then(function (res) {
                deferred.resolve(res.data);
            }, function (res) {
                deferred.reject(res);
            });
            return deferred.promise;
        }

My Salesman model:

public class Salesman
    {
        public int SalesmanID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Gender { get; set; }
        public string BirthDate { get; set; }
        public int Phone { get; set; }
        public string Adress { get; set; }
        public string City { get; set; }
        public int Postal { get; set; }
        public string Role { get; set; }
    }

My server-side controller:

[Route("api/[controller]")]
public class SalesmanController : Controller
{

    private readonly DataAccess _DataAccess;

    public SalesmanController() 
    { 
        _DataAccess = new DataAccess(); 
    } 

    [HttpPost]
    public IActionResult PostSalesman([FromBody] Salesman newData)
    {
        return Ok(newData); 
    }

Solution

  • The header you are sending is wrong. You are sending Content-Type: application/json, but you have to send Accept: application/json.

    Content-Type: application/json is what the server must send to the client and the client must send Accept to tell the server which type of response it accepts.

    addNewSalesman: function (newData) {
            console.log("service");
            console.log(newData)
            var deferred = $q.defer();
            $http({
                method: 'POST',
                url: '/api/Salesman',
                headers: { 'Accept': 'application/json' }
            }, newData).then(function (res) {
                deferred.resolve(res.data);
            }, function (res) {
                deferred.reject(res);
            });
            return deferred.promise;
        }
    

    Should do it. Also see "Content negotiation" on MDN.