加载资源失败：服务器响应状态为400（）。错误：Angular asp。net core 5 api

Question

我正在开发一个前端使用Angular 12和API中使用ASP. net core 5的应用程序。调用HttpPost API时，我收到错误加载资源失败：服务器响应状态为400（）

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

这是我的实体类在asp.net核心

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

    }

这是我的角度分量。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
    
         });

角度服务方式：

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

}

角度模型类：

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

出了什么问题？

Answer 1

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

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

更新：根据对这个和其他答案的评论，似乎设置了一些错误处理，并且在您的POST请求中更详细一点，这可能会进一步揭示问题的原因。假设您有我在API中描述的装饰器，让我们进一步增强API，重点是返回类型，以及使用RxJs在Angular中的服务函数，看看我们是否可以从中提取出更有用的响应。

为了清晰起见，总而言之，取消SendOtpReq类的嵌套：

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

接下来，我们将控制器POST方法的返回类型调整为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");
     }

 }

现在，让我们使用角度服务观察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 2

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

我换了行：

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

到

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

Answer 3

您的POST请求的返回类型错误。当角度httpClient要求返回SendOTPReq时，您不能让控制器返回对象。

所以相反你需要

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