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

Posted 2023-02-27

【中文标题】.NET Core 3.1 + Angular 上的 PreflightMissingAllowOriginHeader CORS 错误

【英文标题】：PreflightMissingAllowOriginHeader CORS error on .NET Core 3.1 + Angular

【发布时间】：2021-07-27 12:27:38

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你是否在 localhost 上开发你的 Angular 应用程序？

是的，BE 和 FE 都在 localhost 上。

好的，所以我和我的团队基本上遇到了完全相同的问题，唯一的区别是我们的 BE 是在线的，但也许我的解决方案也适用于你。所以尝试以下方法：给自己一个像邮递员这样的 http-client 并尝试达到你的 BE。这应该有效，但仍然只是为了确认。之后，转到您的浏览器并安装附加组件。例如，在 Firefox 中，有一个名为“Cors Everywhere”的附加组件。启用它，启动您的应用程序并尝试再次联系。让我知道这是否改变了什么。

i.stack.imgur.com/aiGSO.png 中显示的 Provisional headers are shown 部分表示请求实际上并未发送——也就是说，请求根本不会到达http://localhost:5000 服务器.所以尝试强制重新加载，并在不同的浏览器中尝试，或从不同的计算机尝试。如需了解更多信息，请参阅 ***.com/a/21179105/441757。

@okihnjo 我在开发过程中一直在使用 Postman，在我启用身份验证之前一切正常，因为 Postman 不支持 NTLM 身份验证（他们有测试版，但报告了很多问题）因此我在尝试从 Postman 到达端点时得到 401。此外，我无法安装任何扩展程序，因为我在公司硬件上，包括浏览器扩展程序在内的所有内容都被管理员阻止和管理。我现在将尝试使用 Insomnia，它应该有更好的 NTLM 支持并回复您。

【参考方案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 -> 架构师 -> 服务 -> 配置 -> 开发，添加“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';

【讨论】：

您好@Pierre，谢谢您的回答。这确实解决了我的问题。只有一件事，“procyConfig”参数必须在服务选项而不是服务配置中。至少对我来说，该文件在配置中定义时被忽略了，我不得不将它放在选项中。

嗯好的。这是因为我使用的是 Angular 12。在 angular.json 中发生了一些变化

【参考方案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");
                
            );