Angular 9 中来自 WebApi 的 400 错误请求（使用 HttpClient）答案

【问题标题】：400 Bad Request From WebApi In Angular 9 (using HttpClient)Angular 9 中来自 WebApi 的 400 错误请求（使用 HttpClient）
【发布时间】：2020-07-10 16:57:02
【问题描述】：

下面是一个返回错误请求的 Asp.net Core WebAPI。当我通过邮递员调用 web api 时，它可以成功运行。但是当我用角度调用时它不起作用。

    [HttpPost]
    [Route("Login")]
    public async Task<ActionResult> Post([FromBody]LoginCommand command)
    {
        var result = await Mediator.Send(command);

        if (!result.Succeeded)
        {
            return BadRequest(result.Errors);
        }

        return Ok(result.Data);
    }

响应在 Angular 端处理如下：

login(input: Login): Observable<any> {
let result;
this.apiService.post(this.loginPath, input).subscribe(
  data => {
    result = data;
    console.log("This should be the response???: ", data);
  },
  err => {
    console.log("err: ", err);
  });
return result;

}

api.services.ts

post(url: string, data: Object = {}): Observable<any> {

const headers = { 'Accept': '*/*', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, HEAD','Content-Type': 'application/json', 
'Access-Control-Allow-Headers': 'X-Requested-With,content-type' }

let result = this.http.post<any>(`${this.apiURL}${url}`, JSON.stringify(data), { headers });
console.log(result);
return result;

}

控制台错误消息：

网络：

【问题讨论】：

能否请将您的 chrome 设置为英文并重新截屏？浏览器控制台输出对于帮助您至关重要。
它看起来像一个 CORS 问题。服务是否在与客户端不同的应用程序中运行？
看起来您的 OPTIONS 请求正在返回 204。您确定 API 端点 URL，尤其是端口号，以确保您在 UI 指向的同一 URL 中运行 API？
stackoverflow.com/a/48464030/8385590
是的，服务在与客户端不同的应用程序中运行。

标签： c# angular rest .net-core asp.net-core-webapi

【解决方案1】：

你需要在你的asp.net core web api项目startup.cs中配置CORS，如果你使用asp.net core 3.0+，在app.UseRouting()和app.UseEndpoints()之间添加app.UseCors()：

app.UseRouting();

app.UseCors( builder => 
{ 
  builder.WithOrigins("https://localhost:5001")   
         .AllowCredentials() 
         .AllowAnyMethod() 
         .AllowAnyHeader(); 
});

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

参考https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1#cors-with-named-policy-and-middleware

【讨论】：