RXJS Observable MergeMap 链答案

【问题标题】：RXJS Observable MergeMap ChainRXJS Observable MergeMap 链
【发布时间】：2020-03-28 05:42:40
【问题描述】：

我有一个简单的 api 请求，它返回一个 observable 给一个对象，其中有一堆项目，每个项目都有一个链接。所以我想直接在我当前的异步流中获取链接后面的数据，但我得到一个 CORS 错误说：

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.

这甚至可以用我当前的fetchOrfFeed() 函数实现吗？还是我误解了一些基本概念？

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)));
  }

【问题讨论】：

您的问题与 RxJS 无关。你需要配置一个CORS请求，检查这个问题：stackoverflow.com/questions/47345282/…

标签： javascript angular rxjs cors observable

【解决方案1】：

您可以配置您的代理，或者如上所述，配置您的 CORS 请求。

如果您选择代理选项（我认为它更好）：

查看 Angular 项目中的 proxy.config.json 文件并将该 URL 添加到其中。

例如：

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

然后在您的服务调用中使用它，例如

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

更多信息在这里：Configure a proxy for your API calls with Angular CLI

【讨论】：

为您的开发环境配置代理服务器只能解决 localhost 的问题。它不会解决已部署应用程序中的 CORS 问题...