3

Estoy intentando consumir un Servicio enviando un token en Angular usando HttpInterceptor pero recibo un error en mi class de AuthInterceptor:

Hago las pruebas en Postman y sirve perfecto.

Obtener la información de un usuario y demás métodos enviando el token.

Lógica y error por método:

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        req = req.clone({
            setHeaders: {
                'Content-Type': 'application/json; charset=utf-8',
                'Accept': 'application/json',
                'Access-Control-Allow-Origin': '*',
                'Authorization': 'Bearer MI-AUTH-TOKEN',
            },
        });

        return next.handle(req).pipe(
            map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    console.log('Evento: ', event);
                }
                return event;
            }),
            catchError((error: HttpErrorResponse) => {

                console.log('Error de HttpInterceptor: ', error);
                return throwError(error);
            }));
    }
}


//==========>>>>> ERROR DE ESTE METODO

>> Mensaje del método:

Error de HttpInterceptor:  
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:8080/auth/realms/tutorial/protocol/openid-connect/userinfo", ok: false, …}
> error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
> headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for http://localhost:8080/auth/realms/tutorial/protocol/openid-connect/userinfo: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://localhost:8080/auth/realms/tutorial/protocol/openid-connect/userinfo"
> __proto__: HttpResponseBase

>>>> ERROR DE CORS EN LA CONSOLA DEL NAVEGADOR

Access to XMLHttpRequest at 'http://localhost:8080/auth/realms/tutorial/protocol/openid-connect/userinfo' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.


Método que consume el api: El error que me arroja este es el mismo de arriba Error de HttpInterceptor: en el mensaje del método del Intercept

getInformatioUser() {
    this.http.get<any>('http://localhost:8080/auth/realms/tutorial/protocol/openid-connect/userinfo').subscribe({
      next: (response: any) => {
        console.log('Response: ', response);
      }, error(response: any) {
        console.log('Error al obtener info de usuario: ', response);
      }
    });
  }

Mi app.module.ts: Este esta bien.

providers: [{
    provide: APP_INITIALIZER,
    useFactory: initializeKeycloak,
    multi: true,
    deps: [KeycloakService],
  }, {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true,
  },
    UsuarioServiceService,
    RolServiceService,
    AreaServiceService],
  bootstrap: [AppComponent]
2
  • En Postman te funciona, porque el que enforza la restricción de CORS es el navegador.
    – JhonRM
    el 21 may. 2021 a las 15:27
  • @JhonRM ya encontré solución y ya logre obtener la información del usuario por medio de token sobre KeyCloak ahora tengo el error es al obtener la lista de usuarios en mi API-REST por CORS pero dejare la solución de como se usa el request con el header. Igual gracias.
    – Angelita
    el 21 may. 2021 a las 15:37

1 respuesta 1

-1

La solución fue hacerlo de esta manera.

req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
req.clone({ headers: req.headers.set('Authorization', 'Bearer AUTH-TOKEN') });

3
  • Viendo el uso que estás dando a los headers, creo que no te ha quedado claro cómo funciona CORS: el header Access-Control-Allow-Origin ha de ser añadido en la respuesta por el backend, no en la petición. el 21 may. 2021 a las 16:04
  • @PabloLozano, Si disculpa se me olvido quitarlo ya edite la respuesta.
    – Angelita
    el 21 may. 2021 a las 16:07
  • 1
    Lo mismo ocurre con Access-Control-Allow-Headers, todo CORS es un asunto de backend aceptando o no peticiones y avisando al navegador "de antemano" el 21 may. 2021 a las 16:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.