HTTP Post请求正文值null c#

Question

I'm setting up a react app with a .NET Core backend. I'm sending a HTTP post request using fetch with the username value and password value to the backend c# user controller login method. The http request is below:

function login(username, password) {
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
    };

    return fetch(`/user/login`, requestOptions)
        .then(handleResponse)
        .then(user => {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('user', JSON.stringify(user));

            return user;
        });
}

I can see in google dev tools that the request is being sent from the code above and contains both a username and password. I placed a breakpoint on the below code on the first line and can see the username and password are not populating on the c# login method side as they are both null.

I've tried 3 different ways, for HttpContext.Request . Form it throws null error. I tried to parse the parameters in the method using the [FromBody] tag and get null . I also tried using a stream reader but it returns an empty string.

[HttpPost]
public JsonResult Login([FromBody] string username, [FromBody] string password) // both are null
{
    System.Diagnostics.Debug.WriteLine("The form has " + username.ToString());
   
    // throws null error
    //string bodyValues = HttpContext.Request.Form["username"];
    
    Stream req = Request.Body;
    //req.Position = 0;
    string json = new StreamReader(req).ReadToEndAsync().Result;

    string input = null;
    try
    {
        input = JsonConvert.DeserializeObject<string>(json);
    }

    catch (Exception ex)
    {
        // Try and handle malformed POST body
        return new  JsonResult("false");
    }

    return new JsonResult("true");
}

Any help is appreciated!

Answer 1

fix your javascript

function login(username, password) {
    const requestOptions = {
        method: 'POST',
        body: { username : username, password: password }
    };
......

and try to remove [FromBody] since you can not use it twice

[HttpPost]
public JsonResult Login( string username, string password)

if you still have some problems try to create view model

public class PasViewModel
    {
      public string Username { get; set; }
      public string Password { get; set; }
    }

and add FromBody to action view model

[HttpPost]
public JsonResult Login( [FromBody] PasViewModel viewModel)