Problème avec la stratégie CORS et .NET Core 3.1

12

Je ne suis pas sûr de ce qui me manque, mais je n'arrive pas à faire fonctionner ma stratégie CORS avec .NET Core 3.1 et Angular 8 côté client.

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();
            });
        }

Message d'erreur côté client:

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.

MISE À JOUR:

Bien que je me configure CORS de manière incorrecte (et la réponse acceptée ci - dessous fait en fait aider à cela) la racine de l' émission était sans rapport. Pour un contexte supplémentaire, l'application fonctionnait parfaitement bien lors de l'exécution de l'API et de l'application angulaire à l'aide de la CLI - je ne rencontrais ce problème qu'après les avoir déployées sur un serveur Web.

Le problème «réel» a fini par être lié à la connexion SQL, que j'ai découvert uniquement après avoir ajouté la journalisation des erreurs de fichier plat à l'API et exécuté une trace SQL Server pour constater que l'application n'était pas du tout en mesure de se connecter à SQL.

Je m'attendrais normalement à ce que cela renvoie simplement un 500 et j'aurais réalisé le problème en 10 secondes - mais la mauvaise configuration de CORS signifiait qu'un 500 n'était jamais réellement retourné parce que le middleware CORS avait échoué en premier. C'était extrêmement frustrant pour dire le moins! . Cependant, je veux ajouter qu'ici, au cas où d'autres se retrouveraient dans cette situation, comme si je «chassais le mauvais lapin», si vous voulez. Après avoir corrigé la configuration de CORS, je me suis rendu compte que le problème réel n'avait aucun lien avec CORS.

TL; DR; - Parfois, des erreurs côté serveur .NET «non CORS» peuvent être renvoyées en tant qu'erreurs CORS si les stratégies CORS ne sont pas définies correctement

Références:

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
la source
1
essayez de définir app.UseCors("foo");avantapp.UseHttpsRedirection();
StepUp
@StepUp merci pour la recommandation, mais toujours pas de chance
KMJungersen
Avez-vous résolu votre problème?
StepUp
Quelqu'un a-t-il résolu ce problème? Pourquoi aucune réponse n'est acceptée?
Waseem Ahmad Naeem
Oui, désolé, je ne suis jamais revenu sur ce problème après l'avoir résolu. J'ai ajouté une mise à jour à la question avec un contexte supplémentaire. Je vous remercie!
KMJungersen

Réponses:

21

d'abord app.UseRouting();puisapp.UseCors("foo");

Modifiez votre Configureméthode comme suit:

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();
    });
}

Ça a marché pour moi!

AbolfazlR
la source
-y at-il un paquet nuget nécessaire?
chana
paquet nuget pour cors
chana
1
@chana - vous n'avez pas besoin d'installer le paquet nuget
AbolfazlR
7
J'étais coincé sur ce problème pendant DAYS! rien d'Internet ne fonctionnait. Votre solution combinée avec le ConfigureServicescode OP a résolu mon problème. Merci beaucoup!
Tahreem Iqbal
1
Je m'étais laissé perplexe pendant des siècles. Merci beaucoup!
Myles J
6

L'API Web utilise app.UseHttpsRedirection(); ce qui cause un CORSproblème si le client demandeur n'est pas httpsbasé. Donc, pour l'utiliser avec le httpclient, nous devons commenter ou supprimer cette ligne.

Ce problème n'est pas avec CORS, le https est à l'origine de ce problème mais une erreur renvoyée le dit avec CORS.

Waseem Ahmad Naeem
la source
Merci. Cela a résolu mon problème
Reagan Gallant
1
C'est bien ça! la ligne UseHttpsRedirection () doit être après UseCors ()
Eric
0

Lorsque vous utilisez localhost as http://localhost:4200, essayez de le définir dans votre configuration:

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
     }
}

Et Configureméthode:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider provider)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseCors("ApiCorsPolicy");
    app.UseHttpsRedirection();
    app.UseAuthentication();
    app.UseMvc();
}
StepUp
la source
0

Lors de l'ajout du service Cors, assurez-vous d'inclure .SetIsOriginAllowed((host) => true)après.WithOrigins("http://localhost:4200")

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