0

Tengo una aplicación en Angular, la cual quiero hacer una llamada a una API (endpoint) securizado con credenciales (user & password).

Lo consigo hacer con Ajax, pero no con Angular.

Código AJAX/JQUERY:

jQuery.ajax('https://www.ENDPOINT.com/api/FLUJO/v1/POSTS', {
  type: 'GET',
  format: 'json',
  dataType: 'json',
  crossDomain: true,
  beforeSend: function(xhr) {
      xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa(unescape(encodeURIComponent('USUARIO_ENDPOINT' + ':' + 'PASSWORD_ENDPOINT'))));
      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  },
  success: function(json_data) {
      jQuery('.result').html(JSON.stringify(json_data));
  },
  // In case of error, show an alert
  error: function() {
      alert('Failed!');
  }

})
.fail(function(jqXHR, textStatus, errorThrown) {
  let errorMessage = 'Request Failed (server response logged to console): ' + textStatus + ', ' + errorThrown + '. Server response: ' +
      jqXHR.responseText;
  jQuery('.noResult').html(errorMessage);
})
.done(function(json_data) {
  jQuery('.result').html(JSON.stringify(json_data));
});

La configuración de mi proyecto es la siguiente:

    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.7
Node: 10.13.0
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.7
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              7.0.7
@angular-devkit/schematics        7.0.7
@angular/cli                      7.0.7
@ngtools/webpack                  7.0.7
@schematics/angular               7.0.7
@schematics/update                0.10.7
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Y mi servicio es así:

//myservice.service.ts
    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';

    @Injectable()
    export class MyserviceService {
      data: any = {};

      constructor(private http: HttpClient) {}

      createAuthorizationHeader(headers: Headers) {
        headers.append(
          'Authorization',
          'Basic ' + btoa('USSER_ENDPOINT:PASSWORD_ENDPOINT')
        );
      }

      callme()  {
        let headers = new HttpHeaders();
        this.createAuthorizationHeader(headers);
        return this.http.get('https://www.ENDPOINT.com/api/FLUJO/v1/POSTS', {
          headers: headers
        });
      }
    }

Y esto me da el siguiente error de compilación:

ERROR in src/app/myservice.service.ts(21,36): error TS2345: Argument of type 'HttpHeaders' is not assignable to parameter of type 'Headers'.
  Property 'forEach' is missing in type 'HttpHeaders'.

Busscando por la red no he encontré nada, todo el mundo usa FIREBASE,AUTH0, y en este caso no se puede usar, ya que es un proveedor de servicios.

Lo Que más se acerca es esto, pero no consigo reproducirlo:

https://github.com/kittencup/angular2-github-manage/blob/master/app/services/github.service.ts#L29

Es una respuesta de https://github.com/angular/angular/issues/3266

Alguna ayuda y/o sugerencia??

Muchas gracias por vuestra paciencia y ayuda.

3 respuestas 3

2

Yo tengo funciona en un projecto con "@angular/core": "^4.3.3" el siguiente código en un service.ts:

@Injectable()
export class Api {

    // Declarations
    options: any;
    headers: any;

   constructor(private http: Http) {

        // Build Request Headers
        this.headers = new Headers(
            {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'User-Agent':'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3'
            }
        );

        // Build Request Options
        this.options = new RequestOptions({
          method: RequestMethod.Get,
          headers: this.headers
        });
    }

    // PRODUCT  
    public getProduct(slug?: any) {
        return this.http.get('/GetProducts/' + slug + '.json').toPromise().then((res: Response) => { return res.json(); });
    }

}

Puedes probar a cambiar la forma de setear los headers. Tal vez funcione...

: )

3
  • Gracias @lois6b !! Es mi primera respuesta... :S Commented el 4 dic. 2018 a las 12:52
  • Gracias @Hugo voy a probar y te cuento.
    – Luiggi
    Commented el 4 dic. 2018 a las 12:59
  • La primera de muchas, espero heheh. Irás mejorando las explicaciones, formato y calidad segun vayas respondiendo. Mira la guia Cómo responder para más info. Un saludo
    – lois6b
    Commented el 4 dic. 2018 a las 12:59
1

Creo que el problema esta en el modo en el que estas añadiendo las cabeceras. Prueba a añadirlas con HttpInterceptor Te dejo por aquí un post donde lo explican bastante bien

https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

4
  • muchas gracias voy a probarlo! Ya que me da el siguiente error Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://k2five.strategycopilot.com/Api/Workflow/V1/tasks (razón: falta la cabecera CORS 'Access-Control-Allow-Origin').[Saber más] Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en https://k2five.strategycopilot.com/Api/Workflow/V1/tasks. (Razón: Solicitud CORS sin éxito).[Saber más]
    – Luiggi
    Commented el 4 dic. 2018 a las 14:34
  • Por cierto ya lo tengo habilitado el CORS, pero serán cabaceras, lo que nunca he trabajado con Interceptors
    – Luiggi
    Commented el 4 dic. 2018 a las 14:35
  • Hago la petición con Postman haciendo un Basic Auth y me devuelve el json. Lo hago con JS,jQuery o Node y me da error de CORS. Porque POSTMAN si puede?
    – Luiggi
    Commented el 5 dic. 2018 a las 8:17
  • 1
    Por que postman no tiene problema de CORS, tendrás que permitir en tu back todas las peticiones. Si quieres probar que funciona la peticion puedes usar este comando open -na Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/chrome_dev" que lo que hace es abrir un navegador sin seguridad (no es muy recomendable)
    – Omar
    Commented el 7 dic. 2018 a las 12:14
1

Veo que el problema lo tiene la API, que tiene no tiene certificado de seguridad pero lo sisrve en https:// como sis lo tuviera.

Así que lo que se me ha ocurrido en hacer la petición por Back con NodeJS, con un flag para omitir dicho certificado (antes de la petición request).

Os adjunto el flag por si os interesa:

process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;

Muchas gracias a ambos

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.