RXJS Observable MergeMap Chain

Question

I have this simple api request which returns an observable to an object which has a bunch of items in it and in every item there is a link. So i wanted to directly fetch the data behind the link in my current async stream but i get a CORS error saying:

Access to XMLHttpRequest at 'https://orf.at/stories/3146336/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is this even possible with my current fetchOrfFeed() function? Or did I missunderstood some basic concept?

public fetchOrfFeed(): Observable<any> {
    return this.http.get<OrfFeed>('https://api.rss2json.com/v1/api.json?rss_url=https://rss.orf.at/news.xml')
      .pipe(mergeMap(feed => feed.items))
      .pipe(mergeMap(item => this.http.get<string>(item.link)));
  }

Your issue is unrelated to RxJS. You need to configure a CORS request, check this question: https://stackoverflow.com/questions/47345282/how-to-add-cors-request-in-header-in-angular-5 — Grabofus, Dec 03 '19 at 14:21

score 1 · Answer 1 · answered Dec 03 '19 at 14:26

You can either configure your proxy or, as commented above, configure your CORS Request.

If you choose the proxy option (I think its better):

Have a look in your proxy.config.json file from your Angular project and add that URL to it.

For example:

{
    "/api/fetch-or-feed": {
        "target": "https://api.rss2json.com/v1/api.json?rss_url=https://rss.orf.at/news.xml",
        "secure": false,
        "logLevel": "debug"
    }
}

then use it in your service call like

return this.http.get<OrfFeed>('/api/fetch-or-feed')...

More info here: Configure a proxy for your API calls with Angular CLI

configuring a proxy server for your dev environment only fixes issues with localhost. it won't fix CORS issues in a deployed app... — bryan60, Dec 03 '19 at 14:39

RXJS Observable MergeMap Chain

1 Answers1