From ReactJS to ASP.NET Core 6.0 HTTP POST method cannot receive data

Question

First of all I am a newbie and I am trying to send HTTP POST request from my ReactJS app to my ASP.NET Core 6 Web API. I get a "400 Bad Request" error.

Here is my post method:

const handleSubmit = async (e) => {
        e.preventDefault();
        try{
            const LoginData = {
                mail: email,
                pwd: password,}
            const res = await fetch(`http://localhost:5122/Login`, {
                method: "post",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify(LoginData),
              });
            setEmail('');
            setPassword('');
            setSuccess(true);

I also tried to send post request with axios library but got the same error - "400 Bad request".

And here is my .NET Core POST method:

[Route("[controller]")]
[ApiController]
public class UserController : ControllerBase
{
    [Route("/Login")]
    [HttpPost]
    public  ActionResult<ResponseMessage> Login([FromForm] LoginData LoginData)
    {
        // doing some login operations here
    }
}

And LoginData class has two fields:

public class LoginData
{
    public string mail { get; set; }
    public string pwd { get; set; }
}

When I try to send HTTP POST request, I get "404 Bad Request" error. I able to send HTTP GET request.

I am also able to send HTTP POST request without any data.

Can anyone help me please?

Note: I am able to send HTTP POST request with data using x-www-form-urlencoded from Postman.

Matt Baech · Accepted Answer · 2022-08-19 12:23:13Z

1

You are sending the request as json, so I would guess that you endpoints should be denoted as FromBody instead

public  ActionResult<ResponseMessage> Login([FromBody] LoginData LoginData)

removed misunderstanding by myself

edited Aug 19, 2022 at 12:23

answered Aug 19, 2022 at 12:13

Matt Baech

46412 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Okan Karadag · Accepted Answer · 2022-08-19 13:04:07Z

[FromForm] is application/x-www-form-urlencoded

You should use with FormData for this type and Content-Type should not application/json

var formData = new FormData()
formData.append("mail","[email protected]");
formData.append("pwd","password");
const res = await fetch('http://localhost:5122/Login', {
             method: "post",
             headers: {
                 Content-Type: "application/x-www-form-urlencoded",
              },
                body: formData,
            });

alternative solution using application/json:

you should not be [FromForm] in Login(... )

var loginData = {mail : 'mail@mail', pwd : 'pwd'};
const res = await fetch('http://localhost:5122/Login', {
             method: "post",
             headers: {
                 Content-Type: "application/json",
              },
                body: {loginData:loginData },
            });

Sirius · Accepted Answer · 2023-03-15 17:07:59Z

0

It's been 6 motnhs the message has been posted but i will complete the answer for the oather that will go on this post.

In your handleSubmit :

await fetch(`http://localhost:5122/Login` ...

You need to add User in path because in your controller you have set the route at

[Route("[controller]")]
[ApiController]
public class UserController : ControllerBase

And your controller name is UserController => User

So the path will be http://localhost:5122/User/Login

answered Mar 15, 2023 at 17:07

Sirius

214 bronze badges

Collectives™ on Stack Overflow

From ReactJS to ASP.NET Core 6.0 HTTP POST method cannot receive data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related