Question

我有这个简单的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)));
  }

Answer 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

RXJS可观察的MergeMap链

1 个答案: