Blazor WebAssembly JWT认证项目客户端400错误求助

错误现象 #

客户端调用登录接口时返回400错误：

Failed to load resource: the server responded with a status of 400 (): api/Auth/login:1

核心原因 #

你的API登录端点使用[FromQuery]接收Login模型参数，但客户端通过PostAsJsonAsync将登录数据放在**请求体（JSON格式）**中发送，两者参数传递方式不匹配，导致服务端ModelState.IsValid验证失败，直接返回BadRequest(400)。

解决步骤 #

1. 修改服务端参数绑定方式 #

将AuthController中LoginAsync方法的[FromQuery]改为[FromBody]，让服务端从请求体中读取JSON格式的登录参数：

[HttpPost("login")]
public async Task<IActionResult> LoginAsync([FromBody] Login model)
{
    if (!ModelState.IsValid)
        return BadRequest(ModelState);

    var result = await _authService.LoginAsync(model);

    if (!result.ISAuthenticated)
        return BadRequest(result.Message);

    return Ok(result);
}

2. 额外调试建议 #

• 捕获服务端返回的ModelState错误详情：在客户端Authenticate方法中，添加对400错误的处理，打印或弹窗显示具体错误信息，方便定位问题：

  else if (loginResponse.StatusCode == HttpStatusCode.BadRequest)
  {
      var errorDetails = await loginResponse.Content.ReadFromJsonAsync<Dictionary<string, string[]>>();
      var errorMessage = string.Join("\n", errorDetails.SelectMany(kv => kv.Value));
      await js.InvokeVoidAsync("alert", $"验证错误：{errorMessage}");
  }
  

• 检查Login模型属性匹配：确认客户端绑定的loginRequest.Email和loginRequest.Password，与服务端Login模型的属性名称完全一致（大小写敏感），避免因属性不匹配导致验证失败。

3. 验证修改效果 #

重新启动服务端和客户端，测试登录功能，此时参数传递方式匹配，ModelState验证通过后会正常进入登录逻辑。

内容的提问来源于stack exchange，提问作者ha33