¿Cómo dejar de recibir errores de bloqueos por cors en api .net core 3.1 y vue.js?

Question

he intentado de todo pero sigo teniendo problemas con cors en mi api .net core y consumiendola desde vue.js, ejemplo:
En .Net Core
  readonly string miscors = "miscors";

agrego el servicio
  services.AddCors(options =>
        {
            options.AddPolicy(name: miscors,
                              builder => builder.WithOrigins("http://localhost:8080"));
        });

Asi se ve mi configuracion:
        var option = new RewriteOptions();
        option.AddRedirect("^$", "swagger");
        app.UseRewriter(option);
        app.UseHttpsRedirection();
        app.UseRouting();
        app.UseCors();
        // AÑADIMOS EL MIDDLEWARE DE AUTENTICACIÓN JWT
        app.UseAuthentication();
        // AÑADIMOS EL MIDDLEWARE DE SWAGGER (NSwag)
        app.UseOpenApi();
        app.UseSwaggerUi3();
        app.UseAuthorization();
        //Agregamos punto de acceso a la api, en este casp sera mediante la url /question-hub
        app.UseEndpoints(endpoints => endpoints.MapHub<QuestionHub>("/question- 
        hub").RequireCors(miscors));               
        app.UseEndpoints(endpoints => endpoints.MapControllers().RequireCors(miscors));

No se si podría ser un problema con la forma en que declaro mis rutas:
       [Route("api/[controller]/[action]")]

Petición desde vue
    this.$http.get(`/api/Orders/GetOrders`).then(resp => (this.dataTable = 
    resp.data.orderlist)).catch(e => { console.log(e);});

Y aparte de esta condifuración de cors he probado con muchas más, pero todas terminan fallando, estoy desesperado.

Pablo Gutiérrez · Answer

Es muy probable que el texto del error que se muestra en la consola del navegador (chrome en mi caso) contenga lo siguiente: Response to preflight request doesn't pass access control check
Si este fuera el caso, la causa es porque los navegadores, bajo ciertas circunstancias envían una petición adicional (conocida como Preflight) antes de hacer la petición verdadera. La petición Preflight utiliza el método HTTP OPTIONS y en ocasiones puede contener encabezados que no están permitidos en la configuración predeterminada del CORS.
En mi caso, lo resolví agregando .WithHeaders("authorization") a la política.
services.AddCors(options =>
        {
            options.AddPolicy(name: miscors,
                       builder => builder.WithOrigins("http://localhost:8080")
                                         .WithHeaders("authorization"));
        });

Pero si lo prefieres, puedes permitir cualquier encabezado con .AllowAnyHeader() en lugar de .WithHeaders("authorization")
Lo otro que tengo diferente en mis proyectos es que habilito el CORS en el middleware para todos los endpoints de la aplicación de la siguiente manera:
...
app.UseRouting();

app.UseCors(miscors);   //En esta línea

// AÑADIMOS EL MIDDLEWARE DE AUTENTICACIÓN JWT
app.UseAuthentication();
...

Recomiendo que hagas una prueba primero agregando .WithHeaders o .AllowAnyHeader antes de cambiar los métodos .RequireCors en la configuracion de los EndPoints
Como nota adicional, te comento que Firefox ofrece mejores detalles en el mensaje de error relacionado con el CORS porque no oculta la petición Preflight

¿Cómo dejar de recibir errores de bloqueos por cors en api .net core 3.1 y vue.js?

One Answer

Add your own answers!

Ask a Question