Búsqueda de sitios web

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.