Angular / .NET Core 项目上的 Cors 问题

Posted 2023-03-04

【中文标题】Angular / .NET Core 项目上的 Cors 问题

【英文标题】：Cors issue on an Angular / .NET Core project

【发布时间】：2020-11-24 15:26:50

【问题描述】：

我无法从我的 http 请求中获取数据。在服务器端，我有以下内容

public void ConfigureServices(IServiceCollection services)

    services.AddControllers();
    services.AddSwaggerGen();
    services.AddScoped<IRepository, Repository>();
    services.AddAuthentication(IISDefaults.AuthenticationScheme);
    services.AddCors(options => 
            options.AddDefaultPolicy(builder => builder
               .WithOrigins("http://localhost:4200")
               .AllowAnyMethod().AllowAnyHeader().AllowCredentials()));


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    if (env.IsDevelopment())
    
        app.UseDeveloperExceptionPage();
    
        
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "KYCDB API");
    );

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseCors();

    app.UseAuthentication();

    app.UseAuthorization();

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

该项目还开启了 Windows 身份验证，关闭了匿名。

"iisSettings": 
    "windowsAuthentication": true,
    "anonymousAuthentication": false,
    "iisExpress": 
       "applicationUrl": "http://localhost:51721",
       "sslPort": 49321
    

在角度方面我得到了一个组件

export class HeaderComponent implements OnInit 
  currentEmployee$: Observable<Employee>;

  constructor(private userService: UserService)  

  ngOnInit(): void 
    this.currentEmployee$ = this.userService.getCurrentEmployee();
  

还有一个拦截器

@Injectable()
export class ApiInterceptor implements HttpInterceptor 

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
    req = req.clone( withCredentials: true );
    return next.handle(req);
  

当页面加载时，我收到 2 个警告和一个错误

警告：跨域请求被阻止：同源策略不允许读取位于 http://localhost:51721/employee/current 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

警告：跨域请求被阻止：同源策略不允许读取位于 http://localhost:51721/employee/current 的远程资源。 （原因：CORS 请求未成功）。

错误：http://localhost:51721/employee/current 的 Http 失败响应：0 未知错误

我需要纠正什么？

【问题讨论】：

如果我注释掉 app.UseHttpsRedirection(); 一切都会顺利进行

我发现您的网址有些不匹配。您使用 .WithOrigins("http://localhost:4200") 定义 CORS，使用 http://localhost:51721 启动，并可能重定向到另一个启用 HTTPS 的 URL。尝试在WithOrigins 调用中设置所有有效来源。

WithOrigins 不是我放置所有客户端 url 的地方吗？这就是为什么我把 Angular 放在那里。我也在 environment.ts 文件中的 Angular 项目中使用的启动 url。

是的，如果您的客户端 Angular 应用程序托管在 http://localhost:4200 上，那么它是正确的。起初我以为你也从 ASP.NET 应用程序为客户端提供服务。

如果我删除 https 重定向，我无法理解为什么一切正常。招摇也不能在 https 上工作。

【参考方案1】：

抱歉，这是一个困难的问题，因此可能有很多原因它不起作用，但我遇到了类似的问题，并通过更改 Configure() 函数中的 cors 调用解决了它。 Configure() 函数在运行时被调用并充当 http 请求管道，因此在某些情况下执行顺序很重要 (https://docs.microsoft.com/en-us/aspnet/core/fundamentals/startup?view=aspnetcore-3.1#the-configure-method)

您可以尝试以下方法：

改变电流：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    if (env.IsDevelopment())
    
        app.UseDeveloperExceptionPage();
    
        
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "KYCDB API");
    );

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseCors(); // Move this

    app.UseAuthentication();

    app.UseAuthorization();

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

收件人：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    
    if (env.IsDevelopment())
    
        app.UseDeveloperExceptionPage();
    
        
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "KYCDB API");
    );

    app.UseRouting();

    app.UseCors(); // Here

    app.UseHttpsRedirection();

    app.UseAuthentication();

    app.UseAuthorization();

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

因此，http 管道中的第一个操作是验证 cors。我认为这是一个公平的赌注，因为从您的问题来看，听起来您没有收到应用程序初始化错误，而是出现运行时客户端请求时间错误。我不确定这是否会解决问题，但也许会有所帮助！

【讨论】：

感谢您的建议。我试过了。我尝试了每一个fu.....订单！微软实际上说首先放置重定向，然后是路由，然后是 cors。我开始相信这个问题与企业环境有关。我会尝试在家里复制这个 2nite。