Problemas com a política do CORS e o .NET Core 3.1

12

Não tenho certeza do que estou perdendo, mas parece que a minha política de CORS não está funcionando com o .NET Core 3.1 e o Angular 8 do lado do cliente.

Startup.cs:

        public void ConfigureServices(IServiceCollection services)
        {
            // ...

            // Add CORS policy
            services.AddCors(options =>
            {
                options.AddPolicy("foo",
                builder =>
                {
                    // Not a permanent solution, but just trying to isolate the problem
                    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
                });
            });

            services.AddControllers();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseHttpsRedirection();

            // Use the CORS policy
            app.UseCors("foo");

            app.UseRouting();

            app.UseAuthorization();

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

Mensagem de erro do lado do cliente:

Access to XMLHttpRequest at 'https://localhost:8082/api/auth/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ATUALIZAR:

Embora eu estivesse configurando o CORS incorretamente (e a resposta aceita abaixo ajudou de fato com isso), a raiz do problema não estava relacionada. Para um contexto adicional, o aplicativo estava funcionando completamente bem ao executar a API e o aplicativo Angular usando a CLI - eu só estava tendo esse problema depois de implantá-los em um servidor da web.

O problema "real" acabou relacionado à conexão SQL, que eu descobri depois de adicionar o log de erro de arquivo simples à API e executar um rastreamento do SQL Server para descobrir que o aplicativo não conseguiu se conectar ao SQL.

Normalmente, eu esperaria que isso retornasse apenas 500 e eu teria percebido o problema em questão de 10 segundos - no entanto, a configuração incorreta do CORS significava que um 500 nunca era realmente retornado porque o middleware do CORS falhou primeiro. Isso foi imensamente frustrante para dizer o mínimo! . No entanto, quero acrescentar isso aqui, caso outras pessoas se encontrem nessa situação, pois eu estava "perseguindo o coelho errado", se quiser. Depois de corrigir a configuração do CORS, percebi que o problema real não estava totalmente relacionado ao CORS.

TL; DR; - Às vezes, erros do lado do servidor .NET "não-CORS" podem ser retornados como erros CORS se as diretivas CORS não estiverem definidas corretamente

Referências:

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1#cors-with-named-policy-and-middleware

https://medium.com/swlh/cors-headers-with-dot-net-core-3-5c9dfc664785

KMJungersen
fonte
11
tente definir app.UseCors("foo");antesapp.UseHttpsRedirection();
StepUp
@StepUp obrigado pela recomendação, mas ainda sem sorte #
KMJungersen
resolveu seu problema?
StepUp
Alguém resolveu esse problema? Por que nenhuma resposta é aceita?
Waseem Ahmad Naeem 31/01
Sim, desculpe, nunca voltei a esse problema depois de resolvê-lo. Adicionei uma atualização à pergunta com algum contexto adicional. Obrigado!
KMJungersen

Respostas:

21

primeiro app.UseRouting();entãoapp.UseCors("foo");

Altere seu Configuremétodo da seguinte maneira:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();



    app.UseRouting();  // first
    // Use the CORS policy
    app.UseCors("foo"); // second

    app.UseAuthorization();

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

Funcionou para mim!

AbolfazlR
fonte
-ou necessário um pacote de pepitas?
chana
pacote de pepita para cors
chana
11
@chana - você não precisa instalar o pacote NuGet
AbolfazlR
7
Fiquei preso nesta questão por DAYS! nada da internet funcionou. Sua solução combinada com o ConfigureServicescódigo do OP resolveu meu problema. Muito obrigado!
Tahreem Iqbal
11
Me deixou perplexo por anos. Muito Obrigado!
Myles J
6

API da Web está usando app.UseHttpsRedirection(); que causam CORSproblemas se a solicitação do cliente não se httpsbaseia. Portanto, para usá-lo com o httpcliente, precisamos comentar ou remover essa linha.

Esse problema não está CORSocorrendo, o https está causando esse problema, mas o erro gerado está dizendo que está com o CORS.

Waseem Ahmad Naeem
fonte
Homem Thanx. Isso resolveu meu problema
Reagan Gallant
11
Está correto! a linha UseHttpsRedirection () deve ser posterior a UseCors ()
Eric
0

Como você está usando localhost as http://localhost:4200, tente configurá-lo em sua configuração:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options => options.AddPolicy("ApiCorsPolicy", build =>
    {                
        build.WithOrigins("http://localhost:4200")
             .AllowAnyMethod()
             .AllowAnyHeader();
        }));
        // ... other code is omitted for the brevity
     }
}

E Configuremétodo:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider provider)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseCors("ApiCorsPolicy");
    app.UseHttpsRedirection();
    app.UseAuthentication();
    app.UseMvc();
}
Um passo adiante
fonte
0

Ao adicionar o Serviço Cors, certifique-se de incluir .SetIsOriginAllowed((host) => true)após.WithOrigins("http://localhost:4200")

services.AddCors(options => {
            options.AddPolicy("mypolicy",builder => builder
            .WithOrigins("http://localhost:4200/")
            .SetIsOriginAllowed((host) => true)
            .AllowAnyMethod()
            .AllowAnyHeader());
  });
Sean Baraka
fonte