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

问题

i know this is already asked question in SO. but my doubt is, when i try i to fetch data from external server i can get it without any problem and i can able to populate the data in table with ng-repeat. but once again am doing the same to get some other data(audio - .ogg) with different url it showing Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-

am using ngRoute for below $http i can get data.

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)
           });
});

same approach is not working for below

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;
    });

  });
});

for that i try to access the data from given url, i just change it to call from my local json as below

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

to achieve above, i know I've to do some server works(node.js) but no idea about that. this is what i referred to achieve locally i don't know why the same approach has throwing CROS error for different url.

pls don't down vote it.

fiddle or plunker example would helpful to understand.

Thanks all

回答1:

You cannot get the video resource with $http. In $http instead of using "https://example-url.com/previews/volume1.ogg" as url use "https://example-url.com/json-data" and then change the url of the element.

$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;
});

});

CORS exception was coming as you were fetching media file not json from $http.get.

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

来源：https://stackoverflow.com/questions/48943986/faild-to-load-cross-origin-requests-are-angular-js-1-x-ngroute

标签

javascript

angularjs

ngroute