带有 Vue JS 的 ASP.NET Core 5 从源访问 XMLHttpRequest 已被 CORS 策略阻止

Posted 2023-03-04

【中文标题】带有 Vue JS 的 ASP.NET Core 5 从源访问 XMLHttpRequest 已被 CORS 策略阻止

【英文标题】：ASP.NET Core 5 with Vue JS Access to XMLHttpRequest at from origin has been blocked by CORS policy

【发布时间】：2021-09-18 13:29:09

【问题描述】：

我正在尝试从 VUE JS 应用程序调用 API (ASP.NET Core 5)，但我在浏览器中收到了 CORS 错误。

CORS 策略已阻止从源“http://example.org:98”访问“https://example.com/api/Authentication/login/”处的 XMLHttpRequest：对预检请求的响应不通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

Startup.CS -

public class Startup
    
        public Startup(IConfiguration configuration, Microsoft.AspNetCore.Hosting.IWebHostEnvironment env)
        
            var logger = LogManager.LoadConfiguration(String.Concat(Directory.GetCurrentDirectory(), "/nlog.config")).GetCurrentClassLogger();
            var builder = new ConfigurationBuilder()
            .SetBasePath(env.ContentRootPath)
            .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
            .AddJsonFile($"appsettings.env.EnvironmentName.json", optional: false, reloadOnChange: true)
            .AddEnvironmentVariables();
            Configuration = builder.Build();
            logger.Info("Benchmark Hosting Environment:" + env.EnvironmentName);
        

公共 IConfiguration 配置 获取；

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)

    services.ConfigureCors(Configuration);

    services.AddHttpContextAccessor();

    services.AddControllers();

    services.AddMvc();

    services.ConfigureIISIntegration();

    services.ConfigureLoggerService();

    services.ConfigureAuditService();

    services.ConfigureSqlServerContext(Configuration);

    services.ConfigureRepositoryWrapper();

    services.ConfigureJWTAuthentication(Configuration);
    services.AddSession();


// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    if (env.IsDevelopment())
    
        app.UseDeveloperExceptionPage();
    
    app.UseHttpsRedirection();
    app.UseCors("AllowOrigin");
    app.UseStaticFiles();
    app.UseRouting();
    app.UseAuthentication();

    app.UseAuthorization();
    app.UseSession();
    app.UseForwardedHeaders(new ForwardedHeadersOptions
    
        ForwardedHeaders = ForwardedHeaders.All
    );

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

    app.UseMvc();


public static void ConfigureCors(this IServiceCollection services, IConfiguration config)

    services.AddCors(c =>
    
        c.AddPolicy("AllowOrigin",
            options => options.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod()
            .SetIsOriginAllowed(s => true)
        );
    );

    services.AddControllers();
 

VUEJS - 我正在使用 Axios 库来调用 API，并且我对所有 API 调用都有以下设置。

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

【参考方案1】：

尝试使用具有此语法的命名 cors 策略

     public void ConfigureServices(IServiceCollection services)
        
            services.AddCors(o => o.AddPolicy("AllowAnyOrigins", builder =>
            
                       builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            ));

        .....
            
        

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        
            .....

            app.UseRouting();

            app.UseCors("AllowAnyOrigins");

            app.UseAuthentication();
           app.UseAuthorization();

            ....
         

您的代码中有错误。请注意 app.UseCors("AllowAnyOrigins") 应该放在 app.UseRouting() 和 app.UseAuthorization() 之间

【讨论】：

谢谢，我做了类似的改变，但还没有运气。 :(

【参考方案2】：

你需要像这样Enable CORS

public void ConfigureServices(IServiceCollection services)

    services.AddCors(options =>
    
        options.AddDefaultPolicy(
            builder =>
            
                builder.WithOrigins("http://example.org:98");
            );
    );


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    app.UseCors();

这只是服务器端配置，检查它的最简单方法是从您的 vue 应用程序在浏览器控制台中运行

fetch('https://example.com/api/Authentication/login/').then((x) => console.log(x))

对于上面的配置（在我的例子中是两个 localhost 应用程序）服务器返回 Access-Control-Allow-Origin 并且请求成功

HTTP/1.1 200 正常 日期：格林威治标准时间 2021 年 7 月 8 日星期四 21:56:00 服务器：红隼 传输编码：分块 访问控制允许来源：http://localhost:85

【讨论】：

谢谢，但进行这些更改对我没有帮助。 UI 方面是否需要进行任何更改？