es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Las llamadas API con autenticación JWT devuelven un código de error 401.

30 Jul, 2023 Programación

Tengo una aplicación .NET 6 Web API que utiliza autenticación JWT. El frontend es una aplicación Angular. Cuando hago una llamada a la API con el token de portador en el encabezado, devuelve el código de error 401. Pero con el mismo token de portador, puedo llamar a la misma API desde Swagger y obtener los datos esperados.

Estoy utilizando HttpClient para hacer las llamadas a la API:

import { HttpClient, HttpHeaders } from '@angular/common/http';
...

constructor(private httpClient: HttpClient,
            private router: Router) { }
...

const tokenHeader = new HttpHeaders({ "Authorization": `Bearer ${token}` });
const options = { headers: tokenHeader };
return this.httpClient.post<any>(url, postParams, options);

error en la consola
enter image description here

solicitud:
enter image description here

Solicitud de pre-vuelo:
preflight request

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    El código de error 401 indica que el usuario no está autorizado para acceder al recurso solicitado. Dado que puedes llamar a la misma API desde Swagger con el mismo token de autorización, el problema no está relacionado con la implementación del lado del servidor de la API ni con la validez del token. Puede deberse a la forma en que se pasa el token al servidor o a un problema de CORS.

    Al observar el mensaje de error en la consola, parece que la solicitud de preflight (preflight request) está fallando. Esto indica que el navegador no permite hacer la solicitud debido a un problema de CORS.

    Para solucionar este problema, debes configurar tu servidor para permitir CORS. Esto se puede hacer agregando el middleware de CORS correspondiente a tu aplicación de API web .NET 6.

    services.AddCors(options =>
{
    options.AddDefaultPolicy(builder =>
    {
        builder.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

    Esta configuración permite que cualquier origen, cabecera y método realice solicitudes a la API. Puedes personalizarla según tus requisitos de seguridad.

    Una vez resuelto el problema de CORS, deberías poder realizar llamadas a la API utilizando el token de autorización sin recibir errores 401.

    Si el problema persiste, asegúrate de que el token se esté pasando correctamente verificando su valor en la cabecera “Authorization”. Si el token es válido y se ha resuelto el problema de CORS, entonces es posible que el problema esté en la implementación del lado del servidor de la API. Verifica la lógica y las configuraciones de tu API para asegurarte de que el usuario tenga los permisos necesarios para acceder al recurso.

Comments are closed.