Consumir API REST usando CORS en Angular 2
Quiero consumir una API REST que se está ejecutando en otro servidor en Angular 2.
En la documentación proporcionan un ejemplo de cómo hacerlo usando observables:
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Hero} from './hero';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class HeroService {
constructor (private http: Http) {}
private _heroesUrl = 'http://someserver:8080/heroes'; // URL to external web api
getHeroes () {
return this.http.get(this._heroesUrl)
.map(res => <Hero[]> res.json().data)
.catch(this.handleError);
}
private handleError (error: Response) {
// in a real world app, we may send the error to some remote logging infrastructure
// instead of just logging it to the console
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
Nota que acabo de cambiar el _heroesUrl para poder consumir una API externa, el resto es exactamente como en la documentación.
Desafortunadamente, me daría un error:
EXCEPTION: TypeError: this.http.get(...).map is not a function in [null]
Obviamente no obtendrá ningún dato. ¿Cómo puedo manipular el encabezado HTTP para que se puedan manejar las solicitudes CORS?
Editar 1
- Arreglé el problema de CORS configurando los encabezados adecuadamente en mi backend.
Agregué las importaciones para map y observables:
import 'rxjs/add/operator/map' import 'rxjs/Rx';
Ahora el error anterior desapareció, sin embargo, apareció uno nuevo en mi consola:
Uncaught (in promise) TypeError: object is not a constructor(…) [undefined:1]
Cuando hago clic en la excepción para ver su origen en la consola de desarrollo de Chrome, se abre una nueva pestaña vacía... estoy un poco atrapado aquí ahora
Respuesta #1
No hay nada que hacer con CORS en Angular. CORS es puramente un asunto de servidor <--> navegador. Verifica en la consola de red si tu solicitud realmente se ejecutó y cuál fue la respuesta. Si está bloqueada por el navegador, entonces necesitarás modificar el servidor para habilitar el soporte de CORS.