angular - 使用 Angular 7 调用外部 API

Question

我正在使用 Angular 7。我是 Angular 的新手，这是我的学习阶段。我将开发一个演示应用程序，稍后将在 PWA（渐进式 Web 应用程序）中进行增强。基本上，我将构建一个媒体应用程序，它将播放不同类别的视频，如新闻、体育等。我从在服务器端某处管理的 JSON 提要 URL 获取类别数据。每个类别都有不同的 CDN URL，我们可以在其中获取视频 URL。

现在，我的问题是，当我尝试从 JSON 提要 URL 获取数据时，它将返回 CORS 策略错误，并且我无法使用 angular 获取数据。

我在谷歌搜索但无法找到解决方案。大多数文章建议在服务器端代码中允许标头“Access-Control-Allow-Origin”。但是我从不同的 CDN 获取数据，我无法访问这些 CDN。

如何从外部提要 URL 角度访问数据？如何在 Angular JS 中启用交叉请求？我们是否需要托管一个中间件服务器，并且所有请求都将通过我们可以允许 CORS 的该服务器传递。

标签： angularangular-ui-routerangular7

Answer 1

来自 MDN 网络文档：

跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头告诉浏览器让在一个源（域）运行的 Web 应用程序有权访问来自不同源的服务器的选定资源。当 Web 应用程序请求具有与其自身来源不同的来源（域、协议和端口）的资源时，它会发出跨域 HTTP 请求。

简而言之，这意味着浏览器正在阻止您的 Angular 应用程序的跨域请求。有一些方法可以规避浏览器的同源策略（即反向代理），但对于您的情况，最好的方法是使用您自己的后端服务器（即中间件）查询这些 CDN，然后从您的使用您的 Angular 应用程序拥有自己的后端服务器。