Consume REST Api using CORS in Angular 2

Question

I want to consume a REST api which is running on another server in angular 2.

In the documentation they provide an example how to do it using 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');
  }
}

Note that I just changed the _heroesUrl in order to consume an external api, the rest is exactly as in the documentation.

Unfortunately it would throw me an error:

EXCEPTION: TypeError: this.http.get(...).map is not a function in [null]

Obviousely it won't get any data. How can I manipulate the http header so CORS requests can be handled?

Edit 1

I fixed the CORS issue by setting the headers accordingly in my backend.
I added the imports for map & observables:

import 'rxjs/add/operator/map' import 'rxjs/Rx';

Now the former error disappeared, however, a new one popped up in my console:

Uncaught (in promise) TypeError: object is not a constructor(…) [undefined:1]

When I click on the exception to see it's origin in the chrome dev console, it would open a new empty tab... kind of stuck here now

maybe this help you http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in — Angel Angel, Mar 12 '16 at 23:52
CORS can be handled by adding http headers in rest server http://stackoverflow.com/questions/35957751/angularjs-rest-call-to-another-server/35957833#35957833 — Gary, Mar 13 '16 at 01:33
@Gary thank you, wasn't aware of it. I added the headers at my nancyfx backend — Ronin, Mar 13 '16 at 01:47
@AngelAngel thank you, I added the imports, now getting new errors, see my edit — Ronin, Mar 13 '16 at 01:56
@Ronin what happens when you remove the .catch()? Try using the catch with subscribe — Gary, Mar 13 '16 at 03:22
What browser are you running this in? Also what version of es-shim do you have? https://github.com/paulmillr/es6-shim/issues/403 — Morgan G, Mar 13 '16 at 04:40

score 2 · Answer 1 · answered Mar 13 '16 at 01:29

2

There is nothing to do with CORS in Angular. CORS is purely server <--> browser thing. Check in network console if you request really executed and what the response. If it is blocked by browser. Then you will need to modify server to enable CORS support.

answered Mar 13 '16 at 01:29

Sergey Yarotskiy

4,536
2
19
27

Consume REST Api using CORS in Angular 2

1 Answers1