Failed to load resource: the server responded with a status of 400 () error: Angular asp.net core 5 api

Question

我正在开发一个应用程序，前端为 Angular 12，API 为 ASP.net 核心 5。调用 HttpPost API 时出现错误 Failed to load resource: the server responded with a status of 400 ()

如果我使用字符串或整数参数，则没有问题，并且 API 被正确调用。但是只有当我使用实体 class 传递值时，我才会收到此错误。

这是我在 asp.net 核心

中的实体 class

public class FrontEnd
{ 
  public class SendOTPReq
    {
        public string MobileNo { get; set; }
        public string Email { get; set; }
        public int Type { get; set; }
    }
}

这里是 API

    [Route("SendOTP")]
    [HttpPost]
    public async Task<object> SendOTP(SendOTPReq otpReq)
    {
        try
        {
            CommonApiResponse commonResponse = new CommonApiResponse();

            if (!ModelState.IsValid)
            {
                return new APIResponse(406, "", ModelState.Select(t => new { t.Key, t.Value.Errors[0].ErrorMessage }));
            }
            var Result = await _IFrontEndRepository.SendOTP(otpReq);
            if (Result != null)
            {
                commonResponse.Status = "Success";
                commonResponse.ErrorMsg = "";
                commonResponse.ResultData = Result;
                return new APIResponse(200, "Request Success", commonResponse);
            }
            else
            {
                commonResponse.Status = "Failed";
                commonResponse.ErrorMsg = Result.Message;
                commonResponse.ResultData = Result;
                return new APIResponse(204, "Request Failed", commonResponse);
            }
        }
        catch (Exception e)
        {

            throw new Exception(e.Message);
        }

    }

这是我的 angular component.ts 代码：

const otpReq = new SendOTPReq();

otpReq.MobileNo = this.registerForm.controls['phoneNo'].value;
otpReq.Email = this.registerForm.controls['email'].value;
otpReq.Type = 2; //2 is or email and 1 is for sms

this.accountsService.sendOTP(otpReq).subscribe(      
  (data) => {
         //do stuff here
    
         });

Angular服务方式：

export class AccountsService {

constructor(private httpClient: HttpClient,
private _router: Router) { }

 sendOTP(otpReq: SendOTPReq): Observable<SendOTPReq> {
  debugger;
  return this.httpClient.post<SendOTPReq>(environment.ApiUrl + 'FrontEnd/SendOTP', otpReq)
    .pipe(
      catchError(this.errorHandler),
    );
}


errorHandler(error: { error: { message: string; }; status: undefined; message: any; }) {
  debugger;
  let errorMessage = '';
  if (error.error instanceof ErrorEvent) {
    // Get client-side error
    errorMessage = error.error.message;
  } else {
    // Get server-side error
    if(error.status == undefined)
    {
      errorMessage = "The server connection with the application is showing error. Close the application and restart again."
    }else{
    errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
  }      
  return throwError(errorMessage);
}

}

Angular 型号 class:

export class SendOTPReq
{
  MobileNo!:string;
  Email!: string;
  Type!: number;
}

可能出了什么问题？

Answer 1

您的 POST 请求的 return 类型有误。当您的 Angular httpClient 要求 SendOTPReq returned.

时，您不能让控制器 return object

所以你需要

return this.httpClient.post<MyActualReturnType>(environment.ApiUrl + 'FrontEnd/SendOTP', otpReq)

Answer 2

尝试在您的 API 中添加一个 [FromBody] 装饰器，如下所示：

public async Task<object> SendOTP([FromBody]SendOTPReq otpReq)

更新：根据对这个和其他答案的评论，似乎设置了一些错误处理以及在您的 POST 请求中更详细一些可能会更清楚地说明导致错误的原因问题在这里。假设你有我上面在你的 API 中描述的 [FromBody] 装饰器，让我们进一步增强 API 专注于 return 类型，以及 [=25] 中的服务功能=] 使用 RxJs 看看我们是否能以某种方式从中提取更有帮助的响应。

为了清晰和总结，取消嵌套您的 SendOtpReq class：

public class SendOTPReq
{
    public string MobileNo { get; set; }
    public string Email { get; set; }
    public int Type { get; set; }
}

接下来，让我们将控制器 POST 方法的 return 类型调整为 IActionResult:

[Route("SendOTP")]
[HttpPost]
public async Task<IActionResult> SendOTP([FromBody]SendOTPReq otpReq)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    try
    {                
        var Result = await _IFrontEndRepository.SendOTP(otpReq);
        if (Result != null)
        {
            return Ok(Result);                       
        }

        return BadRequest($"Fail to POST");    
     }
     catch (Exception ex)
     {    
         return BadRequest($"Fail to POST");
     }

 }

现在，让我们使用您的 angular 服务观察来自 API 的整个响应，而不仅仅是正文：

public sendOTP(otpReq: SendOTPReq): Observable<HttpResponse<SendOTPReq>> {
  return this.httpClient.post<SendOTPReq>(environment.ApiUrl +
             'FrontEnd/SendOTP', otpReq { observe: "response" })
             .pipe(
             catchError(this.errorHandler),
    );
}

Answer 3

所以，最后，我修复了它。注释的属性一个接一个地取消注释。当我从 'mobileNo' 字段获取数据时，我没有将其转换为字符串。将手机号码转换为字符串成功。

我改了行：

otpReq.MobileNo = this.registerForm.controls['phoneNo'].value;

至

otpReq.MobileNo = this.registerForm.controls['phoneNo'].value.toString();

Failed to load resource: the server responded with a status of 400 () error: Angular asp.net core 5 api

Failed to load resource: the server responded with a status of 400 () error: Angular asp.net core 5 api

http-status-code-400

asp.net-core-webapi

angular

asp.net-core-5.0

angular12