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.