javascript - 加载失败 - 跨源请求是 - Angularjs 1.x - ngRoute

Question

我知道这已经在 SO 中提出了问题。但我的疑问是，当我尝试从外部服务器获取数据时，我可以毫无问题地获取它，并且我可以使用 ng-repeat 填充表中的数据。但我再次做同样的事情来获取一些其他数据(音频 - .ogg)，它显示 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-/p>

我在 $http 以下使用 ngRoute 我可以获得数据。

app.controller('HomeController', function($scope) {
  $scope.message = 'Hello from HomeController';
    $http.get("https://some-example-url.com/posts")
           .then(function(response) {
               $scope.externalAPIData = response.data;
               $scope.sortByTitle     = 'title';
               $scope.searchByUserName   = '';
               $scope.sortReverse  = false;
               console.log("response", response.data)
           });
});

同样的方法不适用于以下

app.controller('BlogController', function($scope,$http) {
  $scope.message = 'Hello from BlogController';
  $http.get('https://example-url.com/previews/volume1.ogg' ).success(function (data){
    $scope.medianew = data.media.map(function (m) {
      m.url = $sce.trustAsResourceUrl(m.url);
      return m;
    });

  });
});

为此，我尝试从给定的 url 访问数据，我只是将其更改为从我的本地 json 调用，如下所示

[{
    "audioSourceName": "sample 1",
    "audioSource":"https://example-url.com/previews/volume1.ogg"
  }, {
   "audioSourceName": "sample 2",
    "audioSource":"https://example-url.com/previews/volume3.ogg"
  } ]

为了实现上述目标，我知道我必须做一些服务器工作(node.js)，但对此一无所知。 this is what i referred to achieve locally我不知道为什么相同的方法会针对不同的 url 抛出 CROS 错误。

请不要投反对票。

fiddle 或 plunker 示例将有助于理解。

谢谢大家

Answer 1

您无法通过$http获取视频资源。在 $http 中，不要使用“https://example-url.com/previews/volume1.ogg”作为 url，而是使用“https://example-url.com/json-data”，然后更改元素的 url。

$http.get(<url-to-load-json-from>).success(function (data){
$scope.medianew = data.media.map(function (m) {
  m.url = $sce.trustAsResourceUrl(m.url); // m.url is the url of the video
  return m;
});

});

当您从 $http.get 获取媒体文件而不是 json 时，出现了 CORS 异常。

https://plnkr.co/edit/oXF1oOuNeMvTQPNntP6J?p=preview