服务器未将Access-Control-Allow-Origin响应标头添加到400错误响应

时间:2018-12-08 22:20:41

标签: angular asp.net-core .net-core cors

我一直在努力解决这个问题。我的.NET Core Web API上有中间件,该中间件将根据SQL Server返回的错误代码发送用户友好的错误消息。

这在Postman中非常有效,并且当我禁用Chrome From Here的相同来源策略时

因此,这是一个很可靠的证据,它是CORS问题。在浏览了很多有关问题的帖子之后,我仍然无法解决问题。

问题:

如果我在Chrome here中添加了Allow-Control-Allow-Origin扩展名,则一切正常。我的应用程序的所有用户是否都需要在浏览器中安装此程序才能在前端收到适当的错误?这是我最大的担心。这是我的以下配置:

Web API启动策略

app.UseCors(builder => builder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials());

我已在MVC之前注册了它

services.AddCors();
services.AddMvc();

这是我在Angular中使用的方法

  addNewPeopleCategory(
    personCategory: CreatePeopleCategory
  ): Observable<CreatePeopleCategory> {
    return this.http
      .post<CreatePeopleCategory>(this.url + "/create", personCategory)
      .pipe(catchError(this.handleErrorUpdate.bind(this)));
  }

这是我在Angular中的错误处理方法

 private handleErrorUpdate(errorResponse: HttpErrorResponse) {
    if (errorResponse.error instanceof ErrorEvent) {
      console.log("Client Side Error: ", errorResponse.error.message);
    } else {
      console.log("Server Side Error: ", errorResponse);
    }

    this.openSnackbar(errorResponse.error);
    return throwError(
      "There is an issue with the service. Please try again later.
    );
  }

未禁用CORS时

enter image description here

在Chrome中禁用CORS

enter image description here

1 个答案:

答案 0 :(得分:1)

问题不是我在服务器上处理CORS的方式,而是我一直用于错误处理的中间件。

我按照本教程here进行操作,效果很好。问题是中间件类本身的这一行:

context.Response.Clear();

删除此行可立即解决我的CORS问题。在帖子底部发表评论的人向我提出了建议。从我收集的内容来看,此行将清除响应中的CORS标头,然后重新分配我指定的状态代码和内容类型。

您将希望保持班上其他所有东西不变。