How to work with the file:// and Angular protocol

Question

I was wondering if it is possible to work with an Http:// request locally in my application and not on a local server, if possible how do I do this? (does not necessarily have to be with the file protocol://).

//Cleanup the popover when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.musicActionspopover.remove();
  });

  $scope.openMusicActions = function($event, music) {
    $scope.audioSelected = music;
    $scope.musicActionspopover.show($event);
  };

  $scope.closeMusicActionsPopover = function() {
    $scope.musicActionspopover.hide();
  };

  $scope.playAudio = function($event, audioSelected) {
    // Prevents start the song when it is clicked on the menu
    if ($event.srcElement.tagName == 'I') {
      $event.preventDefault();
      return;
    }

    var audioSelectedIndex = 0;
    var queueMusics = [];

    angular.forEach($scope.playlist.audios, function (music, index) {
      if (audioSelected.nid == music.nid) {
        audioSelectedIndex = index;
      };

        queueMusics.push({
        id: music.nid, 
        name: music.title, 
        artist: music.interpeters[0], 
        audioUrl: "file://audio/0379442681742547b1cc4baacab409c3/320/ts_.m3u8",//music.audio_url, 
        albumId: music.album.nid, 
        albumCover: music.album.cover, 
        albumBlurCover: music.album.blur_cover, 
        audioType: music.audioType,
        collectionSourceID: $scope.playlist.nid,
        collectionSourceTitle: $scope.playlist.title,
        collectionSourceCategory: "System Playlist"
      });
    });

    $rootScope.$emit("playAudio", {index: audioSelectedIndex, queueName: $scope.playlist.title, audios: queueMusics});
    $scope.closeMusicActionsPopover();
  };
  $scope.playSystemPlaylist = function ($event) {

    playlist = $scope.playlist;
    var audioSelectedIndex = 0;
    var queueMusics = [];

    angular.forEach(playlist.audios, function (music, index) {
      queueMusics.push({
        id: music.nid, 
        name: music.title, 
        artist: music.interpeters[0], 
        audioUrl: music.audio_url, 
        albumId: music.album.nid, 
        albumCover: music.album.cover, 
        albumBlurCover: music.album.blur_cover,
        audioType: music.audioType,
        collectionSourceID: $scope.playlist.nid,
        collectionSourceTitle: $scope.playlist.title,
        collectionSourceCategory: "System Playlist"
      });
    });

    $rootScope.$emit("playAudio", {index: audioSelectedIndex, queueName: playlist.title, audios: queueMusics});
  };

}]);

Currently I have this mistake :

clappr.js:30025 Xmlhttprequest cannot load file:/audio/0379442681742547b1cc4baacab409c3/320/ts_.m3u8. Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https. loadInternal @clappr.js:30025 d @Raven.js:1279

Answer 1

Simple answer: You can’t.

The protocol file:// has several restrictions imposed by the browser.

However nothing prevents you from creating a web service on your machine, and offer a local site accessible by a URL similar to http://localhost.

Some examples of simple http server implementation below:

• Python - python -m SimpleHTTPServer 8080
• PHP - php -S localhost:8080
• Nodejs - npm install -g http-server, followed by http-server

Answer 2

The problem is safety.

clappr.js:30025 Xmlhttprequest cannot load file:/audio/0379442681742547b1cc4baacab409c3/320/ts_.m3u8. Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https. loadInternal @ clappr.js:30025 d @Raven.js:1279

What happened here is that a page tried to access something outside of its domain, over a protocol in which this is not possible (the supported protocols are listed in the error message).

You must use one of the specified protocols. Also, you will probably need to configure the application or server to allow unsafe requests. And will have a large margin for security holes in the application.

Perhaps it is the case to rethink the architecture of the application and how its content will be served. I suggest opening a specific question on how to avoid requests Cross origin in your application, when you hold both the page making the request and the content to be served on the same machine. So you can do what you have to do with less code, less settings, and your application will be safer.