Problemy z zasadami CORS i .NET Core 3.1

11

Nie jestem pewien, czego mi brakuje, ale wydaje mi się, że moje zasady CORS nie współpracują z .NET Core 3.1 i Angular 8 po stronie klienta.

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

Komunikat o błędzie po stronie klienta:

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.

AKTUALIZACJA:

Mimo, że był konfigurowania CORS niepoprawnie (i poniżej akceptowanego odpowiedź rzeczywiście w tym pomóc) źródłem emisji było niezależne. Dla dodatkowego kontekstu aplikacja działała całkowicie dobrze podczas uruchamiania interfejsu API i aplikacji Angular przy użyciu interfejsu CLI - ten problem występował dopiero po wdrożeniu ich obu na serwerze WWW.

„Rzeczywisty” problem zakończony został związany z połączenia SQL, którą odkryto dopiero po dodaniu rejestrowanie błędów płaskim pliku do API i działa ślad SQL Server do stwierdzenia, że aplikacja nie była w stanie połączyć się z SQL w ogóle.

Zwykle spodziewałbym się, że zwróci to 500 i zdałbym sobie sprawę z tego problemu w ciągu 10 sekund - jednak błędna konfiguracja CORS oznaczała, że ​​500 nigdy nie zostało zwrócone, ponieważ oprogramowanie pośrednie CORS zawiodło jako pierwsze. To było niezwykle frustrujące, mówiąc absolutnie! . Chciałbym jednak dodać to tutaj, na wypadek, gdyby inni znaleźli się w takiej sytuacji, ponieważ „ścigałem niewłaściwego królika”, jeśli wolisz. Po naprawieniu konfiguracji CORS zdałem sobie sprawę, że faktyczny problem był całkowicie niezwiązany z CORS.

TL; DR; - Czasami błędy po stronie serwera „non-CORS” .NET mogą zostać zwrócone jako błędy CORS, jeśli zasady CORS nie są ustawione poprawnie

Bibliografia:

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
źródło
1
spróbuj ustawić app.UseCors("foo");wcześniejapp.UseHttpsRedirection();
StepUp
@StepUp dziękuję za zalecenie, ale wciąż nie ma szczęścia
KMJungersen,
Czy rozwiązałeś swój problem?
StepUp
Czy ktoś rozwiązał ten problem? Dlaczego żadna odpowiedź nie jest akceptowana?
Waseem Ahmad Naeem
Tak, przepraszam, że nigdy nie powróciłem do tego problemu po jego rozwiązaniu. Dodałem aktualizację do pytania z dodatkowym kontekstem. Dziękuję Ci!
KMJungersen

Odpowiedzi:

20

najpierw app.UseRouting();więcapp.UseCors("foo");

Zmień Configuremetodę w następujący sposób:

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

To zadziałało dla mnie!

AbolfazlR
źródło
-Czy potrzebny jest pakiet nuget?
chana
Pakiet nuget dla cors
chana
1
@chana - nie trzeba instalować pakietu
nuget
7
Utknąłem w tej sprawie na DAYS! nic z internetu nie działało. Twoje rozwiązanie w połączeniu z ConfigureServiceskodem OP rozwiązało mój problem. Wielkie dzięki!
Tahreem Iqbal,
1
Miałem zatkany od wieków. Wielkie dzięki!
Myles J
6

Interfejs API sieci Web jest używany app.UseHttpsRedirection(); które powodują CORSproblem, jeśli żądanie klienta nie jest httpsoparte. Aby więc użyć go z httpklientem, musimy skomentować lub usunąć tę linię.

Ten problem nie występuje CORS, https powoduje ten problem, ale zgłoszony błąd mówi, że dotyczy CORS.

Waseem Ahmad Naeem
źródło
Dziękuję człowieku. To rozwiązało mój problem
Reagan Gallant
1
To jest poprawne! wiersz UseHttpsRedirection () musi znajdować się po UseCors ()
Eric
0

Ponieważ używasz localhost as http://localhost:4200, spróbuj ustawić go w swojej konfiguracji:

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

I Configuremetoda:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider provider)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseCors("ApiCorsPolicy");
    app.UseHttpsRedirection();
    app.UseAuthentication();
    app.UseMvc();
}
StepUp
źródło
0

Dodając usługę Cors, pamiętaj o dodaniu .SetIsOriginAllowed((host) => true)po.WithOrigins("http://localhost:4200")

services.AddCors(options => {
            options.AddPolicy("mypolicy",builder => builder
            .WithOrigins("http://localhost:4200/")
            .SetIsOriginAllowed((host) => true)
            .AllowAnyMethod()
            .AllowAnyHeader());
  });
Sean Baraka
źródło
0

DLA .NET CORE 3.1

Najlepszym sposobem jest przechowywanie ścieżki źródłowej w pliku app.settings

"Origins": {
    "Server": "http://localhost:5001/",
    "Client": "http://localhost:4200/",
    "CorsOrigins": "http://localhost:4200,http://localhost:5001"
}

aw ConfigureServicesmetodzie zdefiniuj początki z sekcji konfiguracji

services.AddCors(
            options => options.AddPolicy(
                PolicyNames.AllowOrigins,
                builder => builder
                    .WithOrigins(
                        Configuration["Origins:CorsOrigins"]
                            .Split(",", StringSplitOptions.RemoveEmptyEntries)
                            .Select(s => s.TrimEnd('/'))
                            .ToArray()
                    )
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials()
            )
        );

Na koniec po prostu użyj corsa w Configuremetodzie (bez względu na kolejność użycia!)

app.UseCors(PolicyNames.AllowOrigins);     //Enable CORS!
Mohammad
źródło