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

【问题标题】：Server not adding Access-Control-Allow-Origin response header to 400 error response服务器未将 Access-Control-Allow-Origin 响应标头添加到 400 错误响应
【发布时间】：2019-05-10 06:48:23
【问题描述】：

我已经为这个问题苦苦挣扎了一段时间。我的 .NET Core Web API 上有中间件，它将根据我的 SQL Server 返回的错误代码发送用户友好的错误消息。

这在 Postman 和当我禁用 Chrome From Here 的同源策略时非常有效

所以这是一个非常确凿的证据，证明这是一个 CORS 问题。看了很多关于issues的帖子，还是没能解决问题。

问题：

如果我在 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 未被禁用时

在 Chrome 中禁用 CORS 时

【问题讨论】：

浏览器发送两个请求的原因是第一个请求是 CORS preflight OPTIONS 请求。服务器为此发回的 204 响应代码很好，因此预检成功，因为响应还包含必要的 Access-Control-Allow-* 标头。但是来自前端代码的 POST 请求失败并出现 400 错误——显然是因为请求不是服务器期望的格式。但是您的前端代码无法访问该响应——因为服务器（与大多数服务器一样）不会将 Access-Control-Allow-* 标头添加到 4xx 错误中。
它的要点是，如果您希望您的前端代码能够捕获 400 错误并对其进行特定处理，那么您需要服务器添加 Access-Control-Allow-Origin标头到 4xx 响应。但无论如何，就您的前端应用程序的最终用户所见，您无论如何都不想向他们公开 400 错误——因为 400 错误的原因是您的前端代码发送了错误的请求，并且没有您的应用程序的最终用户可以解决此问题，因此尚不清楚尝试向他们公开有关该错误的任何信息的意义何在。
如果您使用 400 或任何 4xx（2xx 以外的任何内容），那么您需要配置服务器以在响应中包含 Access-Control-Allow-Origin。默认情况下，服务器不会将 Access-Control-Allow-Origin 标头添加到 4xx 响应中。
您应该在每个响应中添加 Access-Control-Allow-Origin 标头，是的。但是问题中显示的代码不会导致它被添加到 4xx 错误响应中。该代码可能只会导致它被添加到 2xx 成功响应中。对于大多数服务器，如果您想让服务器为 4xx 错误响应添加自定义标头，除了通常为响应添加标头所做的任何配置之外，您还需要进行一些特殊配置。因此，您可能想在 Stack Overflow 上对服务器文档和其他问题+答案进行一些研究，以弄清楚如何去做。
请考虑发布您的解决方案的详细信息作为答案 - 以便将来遇到相同问题的其他 Stack Overflow 用户能够找到您的答案以帮助他们解决问题。

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

【解决方案1】：

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

我按照本教程here 操作，效果很好。问题在于中间件类本身的这一行：

context.Response.Clear();

删除此行立即解决了我的 CORS 问题。在帖子底部发表评论的人向我透露了这一点。根据我收集的信息，此行将从响应中清除 CORS 标头，然后重新分配我指定的状态代码和内容类型。

您会希望课堂上的其他所有内容都保持不变。

【讨论】：