Getting 415 "Unsupported Media Type" on post request from reactjs to asp.net core apicontroller ?

Question

Getting 415 "Unsupported Media Type" on post request from reactjs to asp.net core apicontroller ?

Description:I am getting 415 "Unsupported Media Type" on a post request, my reactjs submit method looks like the following one where I am sending data using FormData


handleEmployeeSubmit(employee) {
        const data = new FormData();
        data.append('FirstName', employee.firstName);
        data.append('MiddleName', employee.middleName);
        data.append('LastName', employee.lastName);
        data.append('Designation', employee.designation);
        data.append('Salary', Number(employee.salary));
        const xhr = new XMLHttpRequest();
        xhr.open('post', this.props.submitUrl, true);               
        xhr.onload = () => this.loadEmployeesFromServer();       
        xhr.send(data);
    }

and my APIController method look like the following one


[HttpPost]
[Route("Create")]
public async Task<ActionResult> create([FromBody] Employee employee)
        {
            int empid = await _employeerepository.Create(employee);
            return Ok(empid);
        }

any help will be appreciated as I am new to both reactjs and .net core

Posted by: Emerging Expert | Posted on: May 13, 2022

1 answers

Replies

3

I have understood the issue , the main issue is [FromBody] accept "application/json" type while currently your request is sending "application/x-www-url-formencoded" content-type which is causing the issue. So now can use any of the following two approaches
1) simple one could be to just change the [FromBody] attribute to [FromForm] in your api controller method and it will work perfectly for you.( as [FromForm] will accept "application/x-www-url-formencoded" content-type)

 
[HttpPost]
[Route("Create")]
public async Task<ActionResult> create([FromForm] Employee employee)
        {
            int empid = await _employeerepository.Create(employee);
            return Ok(empid);
        }

2) Second solution could be to change your reactjs method to send the data as "application/json" content-type for which you need to create json object and set the request header content-type and use the JSON.stringify method so that your react js component code will look like the following one(which can be acceptable for your current api controller method)


handleEmployeeSubmit(employee) {
        const jsonobj =
        {
            'FirstName': employee.firstName,
            'MiddleName': employee.middleName,
            'LastName': employee.lastName,
            'Designation': employee.designation,
            'Salary': Number(employee.salary)
        }
        const xhr = new XMLHttpRequest();
        xhr.open('post', this.props.submitUrl, true);    
        xhr.setRequestHeader("Content-Type", "application/json")           
        xhr.onload = () => this.loadEmployeesFromServer();       
        xhr.send(JSON.stringify(jsonobj));
    }

Replied by: Tabish Usman | Replied on: May 16, 2022

Reply

×

Getting 415 "Unsupported Media Type" on post request from reactjs to asp.net core apicontroller ?

Replies

Preview