加载失败 - 跨源请求是 - Angular.js 1.x - ngRoute

Question

我知道这已经在 SO 中提出了问题。但我的疑问是，当我尝试从外部服务器获取数据时，我可以毫无问题地获取它，并且我可以使用 ng-repeat 在 table 中填充数据。但是我再次做同样的事情来获取一些其他数据（音频 - .ogg），它显示 url 不同 仅协议方案支持跨源请求：http，数据，chrome, chrome-

我在 $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" as url use "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

加载失败 - 跨源请求是 - Angular.js 1.x - ngRoute

Faild to load - Cross origin requests are- Angular.js 1.x - ngRoute

javascript

angularjs

ngroute