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

Issue

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

Solution

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

Answered By – Amit Dhaka

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.