React + ASP.Net Core 3：CORS 对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】React + ASP.Net Core 3：CORS 对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头

【英文标题】：React + ASP.Net Core 3: CORS Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header

【发布时间】：2020-05-05 09:26:20

【问题描述】：

我正在尝试设置一个反应前端来与 .net 后端对话。但是我似乎被困在 cors 设置上。下面我有来自后端项目的启动代码以及来自前端的代码。我已经遵循了多个指南，但我不确定我在哪里搞砸了，这以前在我的本地主机上有效，但在部署到云时无效。 （我关注的指南：https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1 和 https://code-maze.com/enabling-cors-in-asp-net-core/）

感谢您的帮助！

来自 React App 控制台的错误： 访问从源“https://frontend.azurewebsites.net”获取“https://backend.azurewebsites.net/api/accountcredentials”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

asp.net项目中的启动代码：

public void ConfigureServices(IServiceCollection services)
    
        services.AddMvc()
            .AddNewtonsoftJson();

        services.AddSingleton<UserService>();
        services.AddSingleton<AccountService>();

        services.AddCors(o => o.AddPolicy("ReactPolicy", builder =>
        
            builder.AllowAnyOrigin() //dev
                   //.WithOrigins("http://localhost:3007") // dev
                   //.WithOrigins("https://frontend.azurewebsites.net")
                   .AllowAnyMethod()
                   .AllowAnyHeader()
                   .AllowCredentials();
        ));
    

    // 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();
        
        else
        
            // 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.UseRouting(routes =>
        
            routes.MapControllers();
        );

        app.UseCors("ReactPolicy");

        app.UseAuthorization();
    

控制器类的属性：

  [Produces("application/json")]
    [Route("api/[controller]")]
    [ApiController]
    [EnableCors("ReactPolicy")]

【参考方案1】：

试试这个方法：

    readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

    public void ConfigureServices(IServiceCollection services)
    
        ...

        services.AddCors(options =>
        
            options.AddPolicy(MyAllowSpecificOrigins,
            builder =>
            
                builder.SetIsOriginAllowed(isOriginAllowed: _ => true).AllowAnyHeader().AllowAnyMethod().AllowCredentials();
            );
        );

        ...
     


    public void Configure(IApplicationBuilder app, IHostEnvironment env)
    

        ...

        app.UseForwardedHeaders(new ForwardedHeadersOptions
        
            ForwardedHeaders = ForwardedHeaders.XForwardedFor |
                   ForwardedHeaders.XForwardedProto
        );

        app.UseCors(MyAllowSpecificOrigins);

        ...

     

将 MyAllowSpecificOrigins 编辑为您的 cors 名称

【讨论】：

YURSSSSSSSSSSSSSSS！！！！谢谢！

不客气 :)