Acceso a Xmlhttprequest en Origin Blocked por CORS Policy Asp.NET Core MVC

Estoy diseñando una aplicación web basada en MVC que sirve como panel de informes, sacando datos de algunas fuentes diferentes. Además de mi controlador Home/View, he diseñado controladores de API por cada fuente de servicio/datos y estoy usando Jquery/Ajax para consultar mis puntos finales de API.

También estoy usando Microsoft. Identidad.Web/Web.UI para agregar autorización/authenticación en mi aplicación y cada Controlador requiere un usuario autenticado.

El problema que estoy teniendo, la solicitud que hace mi JS por supuesto pide datos de uno de mis Controladores de API, entonces la API realmente me redirige a iniciar sesión (aunque ya tengo una sesión basada en cookies autenticada). La redireccion está siendo bloqueada con el siguiente error:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/...(redirected from 'https://X.X.X.X:X/v1/MicrosoftPlanner/') from origin 'https://X.X.X.X:X' ha sido bloqueado por la política CORS: La respuesta a la solicitud previa al vuelo no pasa el control de acceso: Ningún encabezado 'Access-Control-Allow-Origin' está presente en el recurso solicitado.

He intentado sin éxito utilizar el CORS de Microsoft para permitir la redireccion - mi último intento fue permitir todo como así:

ConfigureServices

public void ConfigureServices(IServiceCollection services)
        {
            string[] initialScopes = Configuration.GetValue("DownstreamApi:Scopes")?.Split(' ');

            services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
                    .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
                        .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
                            .AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
                            .AddInMemoryTokenCaches();

            services.Configure(Configuration.GetSection("ParkMyCloud"));
            services.Configure(Configuration.GetSection("ServiceNow"));

            services.AddCors();

            services.AddControllersWithViews(options =>
            {
                var policy = new AuthorizationPolicyBuilder()
                    .RequireAuthenticatedUser()
                    .Build();
                options.Filters.Add(new AuthorizeFilter(policy));
            });
            services.AddRazorPages()
                    .AddMicrosoftIdentityUI();

            services.AddOptions();
        }

Configuración

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

            app.UseCors(builder =>
            {
                builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
            });

            app.UseRouting();

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

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
                endpoints.MapRazorPages();
            });
        }

Estoy saliendo de Microsoft Documentation aquí: https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-5.0#preflight-requests

Es mi entendimiento que este es el menos restrictivo absoluto, por lo tanto debe servir como un caso básico que tendría éxito. Sin embargo, todavía no se ha dado cuenta de cómo resolver esto.

Sé que podría usar un proxy, pero estoy tratando de evitar trabajar alrededor.

También he mirado otros puestos aquí, y hasta ahora no he visto una solución que también ha trabajado para mí.

Pregunta hecha hace 3 años, 5 meses, 0 días - Por debugdynamo

4 Respuestas:

  • Desde este docPodemos ver que:

    Una solicitud de preluz CORS se utiliza para determinar si el recurso que se solicita se establece para ser compartido a través de los orígenes por el servidor. Y las solicitudes OPTIONS siempre son anónimas, el servidor no respondería correctamente a la solicitud de prevuelo si no se activa la autentificación anónima.

    Acceso a XMLHtpRequest https://login.microsoftonline.com/...( redireccionado desde https://X.X.X.X:XX/v1/MicrosoftPlanner/) de origen "https://X.X.X.X:XX" ha sido bloqueado por la política CORS: Response to preflight request no pasa control de acceso: No 'Access-Control-Allow-Origin' cabecera está presente en el pedido recursos.

    Para solucionar el problema anterior, si se ejecuta la App(s) en local para probar el propósito con CORS, puede intentar habilitar la authentificación anónima.

    Además, si su App(s) está alojada en IIS, puede intentar instalar Módulo IIS CORS y configurar CORS para la aplicación.

    Respondida el Dec 16, 2020 a las 21:04 - por quantumquill62b1

    Votos positivos: 0 | Votos negativos: 0

  • Contacté con Microsoft dev assistance y resulta que no puedes aplicar una política de CORS al punto final de inicio de sesión Azure AD. Estoy intentando trabajar con ADAL/MSAL. JS implicit grant flow.

    Respondida el Dec 16, 2020 a las 21:09 - por pixelpioneerc4b5

    Votos positivos: 0 | Votos negativos: 0

  • El problema de CORS que estás experimentando se debe a que el servidor al que estás tratando de acceder desde tu frontend está configurado para no permitir solicitudes desde un origen diferente, en este caso, tu frontend en https://X.X.X.X:X.

    Para solucionar este problema, debes configurar correctamente la política de CORS en tu aplicación ASP.NET Core. En lugar de permitir cualquier origen (AllowAnyOrigin()), te recomendaría que especifiques explícitamente el origen desde el que se permitirán las solicitudes. Esto mejora la seguridad de tu aplicación al restringir el acceso solo a los orígenes autorizados.

    Modifica la configuración en tu método Configure en tu clase Startup de la siguiente manera:

    csharp
// Dentro del método Configure en Startup.cs
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.CongfigureExceptionHandler();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseCors(builder =>
    {
        builder
        .WithOrigins("https://X.X.X.X:X")  // Especifica el origen permitido
        .AllowAnyMethod()
        .AllowAnyHeader();
    });

    app.UseRouting();

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

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        endpoints.MapRazorPages();
    });
}

    En el código anterior, asegúrate de reemplazar https://X.X.X.X:X con el real origen desde donde se está haciendo la solicitud. Al especificar este origen en la política CORS, el servidor permitirá las solicitudes Ajax desde este origen en particular.

    Después de hacer estos cambios, asegúrate de reiniciar tu aplicación para que los cambios de configuración surtan efecto. Con esta configuración más específica, deberías ser capaz de evitar el error de CORS y permitir que las solicitudes se realicen con éxito.

    Respondida el Dec 17, 2020 a las 21:03 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Causa del problema:

    El error CORS indica que la solicitud de XMLHttpRequest desde el origen de tu aplicación (https://X.X.X.X:X) está siendo bloqueada por la política CORS del servidor de la API (https://login.microsoftonline.com). Esto se debe a que el servidor no establece el encabezado Access-Control-Allow-Origin con un valor aceptable para tu aplicación.

    Solución:

    Para resolver este problema, debes configurar el servidor de la API para que permita las solicitudes CORS desde tu aplicación. Esto se puede hacer configurando el encabezado Access-Control-Allow-Origin en el servidor.

    En tu código ConfigureServices, ya has agregado CORS:

    csharp
services.AddCors();

    Ahora, en Configure, configura la política CORS para permitir todas las solicitudes desde cualquier origen:

    csharp
app.UseCors(builder =>
{
    builder
    .AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader();
});

    NOTA: Esta configuración de CORS es muy permisiva y debe ajustarse para una mayor seguridad en un entorno de producción.

    Ahora, el servidor de la API debería permitir solicitudes CORS desde tu aplicación y el error debería resolverse.

    Consideraciones adicionales:

    Para una configuración de CORS más restrictiva, puedes especificar orígenes, métodos y encabezados específicos permitidos. Si el servidor de la API no está bajo tu control, consulta con el proveedor de la API para que configuren los encabezados CORS adecuados. * Puedes utilizar una herramienta de desarrollo como la consola del navegador para inspeccionar las respuestas de XMLHttpRequest y verificar si se están configurando los encabezados CORS necesarios.

    Respondida el Dec 17, 2020 a las 21:15 - por Gemini

    Votos positivos: 0 | Votos negativos: 0