.NET Core 3.1 + Angular 上的 PreflightMissingAllowOriginHeader CORS 错误

Question

我正在 .NET Core 3.1 + Angular 上开发一个应用程序，直到最近我尝试对后端实施协商身份验证配置时一切正常。无论如何，即使在恢复所有身份验证配置后问题仍然存在，因此它可能不相关。

我收到描述 PreflightMissingAllowOriginHeader 后跟 401 错误的 CORS 错误。

下面你可以看到我的代码。出于沮丧，当我尝试调试此问题时，我什至允许所有来源，headers 和方法。

Startup.cs

public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy(name: MyAllowSpecificOrigins,
                builder => { builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials(); });
        });

// Tried both ^ and v

/*      services.AddCors(options =>
        {
            options.AddPolicy(name: MyAllowSpecificOrigins,
                builder => { builder.WithOrigins("http://localhost:4200").AllowAnyHeader().AllowAnyMethod().AllowCredentials(); });
        });*/
    .
    .
    .
    .

        services.AddAuthentication(NegotiateDefaults.AuthenticationScheme).AddNegotiate();

    .
    .
    .
    .
    .
    }


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        /*            app.UseHttpsRedirection();*/

        app.UseRouting();

        app.UseCors(MyAllowSpecificOrigins);
        
        app.UseAuthentication();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers().RequireCors(MyAllowSpecificOrigins); // <--- Tried both with and without RequireCors
        });

    }

Angular WebReqService

readonly ROOT_URL: string;
readonly httpHeaders: HttpHeaders = new HttpHeaders({'Content-Type': 'application/json'});
readonly httpOptions = {
headers: this.httpHeaders,
withCredentials: true
};

constructor(private http: HttpClient) {
  this.ROOT_URL = 'http://localhost:5000';
}

get(uri: string): Observable<any> {
  return this.http.get<any[]>(`${this.ROOT_URL}/${uri}`, this.httpOptions);
}

最奇怪的是，如果我尝试通过在浏览器中调用请求或在具有 NTLM 授权的 Insomnia 中直接访问 API，一切正常。只有当我尝试从 Angular FE 访问 API 时，我才会收到错误。

任何想法可能是什么原因以及如何解决它？ 另外，我认为这不是由于未被授权使用该应用程序引起的，因为正如我所说，它在 Angular 之外工作，而且如果用户未被授权，它被配置为 return 403 而不是 401 .

Answer 1

您可以尝试设置 Angular 代理。

1 - 在 angular 应用程序的根目录下创建一个文件 proxy.conf.js，内容如下：

    const PROXY_CONFIG = [
     {
     context: ["/api"],
     target: "http://localhost:5000",
     secure: false,
     logLevel: "error",
     changeOrigin: true,
    }
   ];
   module.exports = PROXY_CONFIG;

2 - 在 angular.json 项目 -> yourprojectname -> architect -> serve ->configurations -> development 中，添加“proxyConfig”：“proxy.conf.js”

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            },
            "development": {
              "browserTarget": "client:build:development",
              "proxyConfig": "proxy.conf.js"
            }
          },

3 - 在您的 Angular WebReqService 中，设置 this.ROOT_URL = 'http://localhost:4200';

Answer 2

在 .NET Core 3.1/angular.

中，不必为在本地主机上的开发设置常规 CORS

我最好的选择是您的 launchSettings.json.csproj 文件有问题，或者您忘记在 startup.cs

的 Configure 方法中设置 useSpa

            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "pathToMyAngularRootFolder";

                if (env.IsDevelopment())
                {
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
                }
            });

.NET Core 3.1 + Angular 上的 PreflightMissingAllowOriginHeader CORS 错误

PreflightMissingAllowOriginHeader CORS error on .NET Core 3.1 + Angular

cors

preflight

.net-core

angular