CORS 错误，无法从 asp.net 核心后端接收数据

Posted 2023-03-04

【中文标题】CORS 错误，无法从 asp.net 核心后端接收数据

【英文标题】：CORS Error, can't receive data from asp.net core backend

【发布时间】：2021-11-12 05:12:00

【问题描述】：

我刚刚开始使用 Web 服务。我创建了一个带有角度前端的 asp.net 核心应用程序。

我已经将 CORS 添加到我的网络服务 startup.cs：

    public void ConfigureServices(IServiceCollection services)
    
        //services.AddControllersWithViews();
        services.AddControllers();

        services.AddDbContext<BuchverwaltungDbContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

        // In production, the Angular files will be served from this directory
        //services.AddSpaStaticFiles(configuration =>
        //
        //    configuration.RootPath = "ClientApp/dist";
        //);
        services.AddCors();
    

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    
        app.UseCors(options =>
        options.WithOrigins("http://localhost:4200/")
        .AllowAnyMethod()
        .AllowAnyHeader());

        if (env.IsDevelopment())
        
            app.UseDeveloperExceptionPage();
            //Swagger hier einbauen
        
        else
        
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        if (!env.IsDevelopment())
        
            app.UseSpaStaticFiles();
        

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "controller/action=Index/id?");
        );

        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 = "ClientApp";

            if (env.IsDevelopment())
            
                spa.UseAngularCliServer(npmScript: "start");
            
        );
    

这是我尝试在 angular Frontend 中阅读书籍的方法：

getBooks() 
return this.http.get(this.baseURL + "/books")
.toPromise()
.then(res => this.books = res as Book[]);

不知何故，错误仍然显示在控制台上：

CORS 策略已阻止从源“http://localhost:4200”访问“https://localhost:44302/api/books”处的 XMLHttpRequest：无“访问控制允许源” ' 请求的资源上存在标头。

在浏览器中打开我的 API (https://localhost:44302/api/books) 时，所有数据都正确显示。

【参考方案1】：

根据docs：

对 UseCors 的调用必须放在 UseRouting 之后，但在 UseAuthorization 之前。有关详细信息，请参阅中间件顺序。

因此，只需更改Configure 方法中调用方法的顺序即可。

基于 cmets 更新

还要从原点删除尾部斜杠。例如：WithOrigins("http://localhost:4200") 而不是 WithOrigins("http://localhost:4200/")。

CORS 标头需要协议和域 (http://localhost:4200)，而不是端点 (http://localhost:4200/)。

【讨论】：

我更改了订单但仍然是同样的错误..

您使用哪个版本的 asp.net？

我使用 .net 5.0

更改后您的订单看起来如何？尝试在 url 末尾删除 / 以拥有 WithOrigins("http://localhost:4200")

这是因为末尾的 / 。你是个传奇，谢谢:)

【参考方案2】：

services.AddCors(x => x.AddDefaultPolicy(builder => 
            builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
        ));

试试这个

【讨论】：

还是同样的错误