时间戳

首页 > 解决方案 > RXJS Observable MergeMap 链

javascript - RXJS Observable MergeMap 链

问题描述

我有这个简单的 api 请求，它返回一个可观察到的对象，该对象中有一堆项目，每个项目都有一个链接。所以我想直接在我当前的异步流中获取链接后面的数据，但我得到一个 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)));
  }

标签： javascriptangularrxjscorsobservable

解决方案

您可以配置您的代理，或者如上所述，配置您的 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')...

更多信息：使用 Angular CLI 为您的 API 调用配置代理

推荐阅读