1

que puedo hacer para que pueda funcionar una petición con HttpClient desde Angular6, cuando uso jQuery.ajax todo funciona correctamente. pero con HttpClient me dice que no esta autenticado (Estoy usando autenticación con tokens JWT (funciona correctamente ..creo)).

**Mi servicio en Angular6

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../environments/environment.prod';
declare var $: any;
@Injectable({
  providedIn: 'root'
})
export class HomeService {

  constructor( private http: HttpClient) { }

noFunciona() {
const httpOptions = {
  headers: new HttpHeaders({
    'Authorization': `Bearer eyJhbGciOiJ...`
  })
};
this.http.get('http://localhost:5000/api/customer/home', httpOptions)
  .subscribe(data => {
     console.log(data);
   }, error => {
     console.log('Error', error);
  });
}

siFunciona() {
   const settings = {
     'url': 'http://localhost:5000/api/customer/home',
     'method': 'GET',
     'headers': {
       'Authorization': 'Bearer eyJhbGciOiJ...'
     }
   };

  $.ajax(settings).done(function (response) {
    console.log(response);
  });
 }


}

podrían ayudarme guiándome en que debo hacer para que pueda funcionar en la función noFunciona() ya que me manda el siguiente error introducir la descripción de la imagen aquí LOG Devtools

content-tss.js:2 content-tss.js loaded:  http://localhost:4200/#/home
VM7808:5 hosted page injected
content-ads.js:2 content-ads.js loaded:  http://localhost:4200/#/home
core.js:3123 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
VM7808:86 caught history
localhost/:1 GET http://localhost:5000/api/customer/home 401 (Unauthorized)
error.interceptor.ts:21 HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Unauthorized", url: "http://localhost:5000/api/customer/home", ok: false, …}error: nullheaders: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}message: "Http failure response for http://localhost:5000/api/customer/home: 401 Unauthorized"name: "HttpErrorResponse"ok: falsestatus: 401statusText: "Unauthorized"url: "http://localhost:5000/api/customer/home"__proto__: HttpResponseBase
home.service.ts:28 Error Http failure response for http://localhost:5000/api/customer/home: 401 Unauthorized

mientras que en la función siFunciona() funciona correctamente y me trae los datos que necesito

** Network metodo siFunciona() introducir la descripción de la imagen aquí

Response Headers

HTTP/1.1 200 OK
Date: Tue, 18 Sep 2018 14:43:06 GMT
Content-Type: application/json; charset=utf-8
Server: Kestrel
Transfer-Encoding: chunked
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200

** Network metodo noFunciona() introducir la descripción de la imagen aquí

Response Headers

HTTP/1.1 401 Unauthorized
Date: Tue, 18 Sep 2018 14:28:00 GMT
Server: Kestrel
Content-Length: 0
Vary: Origin
WWW-Authenticate: Bearer
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200
9
  • 4
    El problema no es de CORS, es de autenticación Commented el 18 sept. 2018 a las 14:07
  • @PabloLozano sabes por que funciona la autenticación con ajax y no con HttpClient ?
    – A2mV
    Commented el 18 sept. 2018 a las 14:13
  • Tendría que ver los detalles: mira la pestaña Network de la consola de Chrome y mira qué diferencias hay entre una llamada y otra. Aparentemente el header se añade igual en ambas, pero algo tiene que ser distinto para que en un caso llegue bien y en otro no Commented el 18 sept. 2018 a las 14:16
  • @PabloLozano ya agregue las imágenes de la pestaña Network de la consola del navegador
    – A2mV
    Commented el 18 sept. 2018 a las 14:29
  • @A.Monsalve te recomiendo que en lugar de las imágenes copies los status code como texto nomas, sino se hace más complicada de leer la pregunta y vas a tener menos posibilidades de que te respondan! Commented el 18 sept. 2018 a las 14:32

2 respuestas 2

4

El código que has puesto me parece que no coincide al 100% con lo que realmente tienes:

En la llamada que te falla tienes lo siguiente:

'Authorization': Bearer: eyJhbGciOiJ...

Fíjate bien: te sobran los dos puntos (:) después de Bearer.

Curiosamente no tienes esos dos puntos en tu código, no sé de dónde salen pero debe ser la causa de tu problema.

3
  • si, mientras he trabajado ha cambiado por el tiempo de vida del token y lo he cambiado cuando caduca. por eso no concuerda en alguna de las imágenes y logs; y en el codigo en el servicio no estan esos dos puntos, de donde crees que salen?
    – A2mV
    Commented el 18 sept. 2018 a las 14:45
  • que vergüenza, fue un interceptor que tenia adicionando el header desde el. fue una estupidez mía. lo siento
    – A2mV
    Commented el 18 sept. 2018 a las 15:11
  • Como se suele decir, sh** happens Commented el 18 sept. 2018 a las 15:24
1

Lo primero que veo incorrecto es que definas un token fijo en el codigo, eso no seria correcto, deberias realizar una llamada al servicio de token como ser

http://localhost:5000/token

este deberias retornar el token que usen en la llamada al servicio y no uno fijo

Por otro lado veo que usaste comillas simples inclinadas ` para poner el Bearer en lugar de comilas simples ' cuando usas

'Authorization': `Bearer eyJhbGciOiJ...`

ASP.NET Core Authentication with JWT and Angular – Part 1

revisa donde usa

[Route("api/auth")]
public class AuthController : Controller
{
    // GET api/values
    [HttpPost, Route("login")]
    public IActionResult Login([FromBody]LoginModel user)
    {
       //codigo

       var tokenString = new JwtSecurityTokenHandler().WriteToken(tokeOptions);
       return Ok(new { Token = tokenString });
    }

esto retorna un token que es el que despues envias a la llamada de la api

Esto seria lo correcto y no poner un Bearer fijo

1
  • gracias por tus consejos, lo del token fijo era para hacer mas simple la exposición de mi problema. lo de los acentos graves ` es por que los uso para concatenar la variable que contiene el token del usuario logeado. Authorization: Bearer ${currentUser.auth_token} y desde la API hago una correcta generacion del token. ya solucione mi problema y era por que un interceptor adicionaba el header a la petición y esta era la que contenía dos puntos Bearer : de verdad muchas gracias por tu comentario.
    – A2mV
    Commented el 18 sept. 2018 a las 16:02

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.