Related Tags:
C# C# (pronounced "C-sharp") is an object-oriented programming language from Microsoft that aims to combine the computing power of C++ with the programming ease of Visual Basic. C# is based on C++ and contains features similar to those of Java. Learn More, React.js React (JavaScript library) In computing, React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. Learn More, ASP.NET Core ASP.NET Core is a free and open-source web framework and successor to ASP.NET, developed by Microsoft. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET. However ASP.NET Core version 3 works only on .NET Core dropping support of the .NET Framework. Learn More, 415 Unsupported Media Type The HTTP 415 Unsupported Media Type client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format. Learn More, HTTP response status codes HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Learn More,

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: | 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: | Replied on: May 16, 2022



Reply
×

Preview