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

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.

CodePudding user response：

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

CodePudding user response：

[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 },
            });