Angular调用ASP.NET Core MVC Post方法时参数接收为null的解决办法

从Angular前端传递用户名到ASP.NET Core MVC的LoginUser Action时，后端参数始终接收为null，需求是通过该用户名登录第三方应用，相关代码及截图如下：

Angular前端代码 #

callExternalProject(username : string): Observable<any> {
      
    return this.http.post<any>(`${environment.CMRDashboardURL}/Account/LoginUser`,username) .pipe(
          catchError(error => {
              return throwError(() => new Error(error))
          })     
    );
}

ASP.NET Core MVC后端代码 #

[HttpPost]
public IActionResult LoginUser(string Username)
{
    string viewName = "Login";

    if (string.IsNullOrEmpty(Username))
    {
        ViewBag.Emptybox = "User name can not be empty.";
        return View(viewName, Username);
    }
}

相关截图 #

• 前端请求截图：
  
• 后端调试截图：
  

解决方案 #

原因 #

Angular的HttpClient.post直接传字符串时，请求内容为纯文本（Content-Type是text/plain），但ASP.NET Core MVC默认不会从纯文本请求体中绑定简单类型参数，需显式指定绑定规则。

修复方案 #

方案1：修改后端Action，指定参数从请求体绑定

给参数添加[FromBody]特性，告诉框架从请求体读取值：

[HttpPost]
public IActionResult LoginUser([FromBody] string Username)
{
    string viewName = "Login";

    if (string.IsNullOrEmpty(Username))
    {
        ViewBag.Emptybox = "User name can not be empty.";
        return View(viewName, Username);
    }
    // 后续登录逻辑
}

方案2：前端传递JSON格式数据（更推荐）

把用户名包装成JSON对象传递，适配前后端交互的常规格式，扩展性更强：

callExternalProject(username : string): Observable<any> {
    const payload = { Username: username };
    return this.http.post<any>(`${environment.CMRDashboardURL}/Account/LoginUser`, payload) .pipe(
          catchError(error => {
              return throwError(() => new Error(error))
          })     
    );
}

此时后端可创建模型类规范参数接收，代码更易维护：

public class LoginRequest
{
    public string Username { get; set; }
}

[HttpPost]
public IActionResult LoginUser([FromBody] LoginRequest request)
{
    string viewName = "Login";

    if (string.IsNullOrEmpty(request?.Username))
    {
        ViewBag.Emptybox = "User name can not be empty.";
        return View(viewName, request?.Username);
    }
    // 后续登录逻辑
}

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