C'è un modo per includere un'intestazione http personalizzata in una chiamata di origine <video>?

Question

Ho un semplice player html5, implementato con videoJS. Per recuperare correttamente i file sorgente dal server, ho bisogno di impostare un'intestazione personalizzata nella richiesta per il video.

Poiché l'applicazione utilizza AngularJS, ho implementato un intercettore per impostare l'intestazione:

myApp.factory('headerInterceptor', function() { 
    return { 
    request: function (config) { 
     config.headers['my-header'] = 'test'; 
     return config; 
    } 
    }; 
}); 

myApp.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('headerInterceptor'); 
} 

Problemi con questa, è che la chiamata al video non viene catturato da esso, in modo che nessun intestazione è impostato (it è però per altre risorse). Quindi angolare non carica i video. Nessuna grande sorpresa in questo. Controllo della scheda di rete nei tool di sviluppo, ha scoperto che videoJS avvia la chiamata:

Ma trovare la mia strada nel plugin videoJS è stato difficile, e couln't trovare dove le chiamate sono effettuate. Mi sto solo chiedendo, c'è un modo semplice per impostare l'intestazione per questa chiamata? non importa se è semplice javascript, o attraverso angolare, o anche modificando il plugin videoJS.

Answer 1

All'interno di un blocco di esecuzione angolare, è possibile eseguire l'override della funzione XHR beforeRequest del plug-in videojs. YMMV, ma se si utilizza HLS plug-in, ad esempio, si potrebbe fare qualcosa di simile:

angular.module('app', []).run(function($localStorage) { 

    var _beforeRequest = _.isFunction(videojs.Hls.xhr.beforeRequest); 
    videojs.Hls.xhr.beforeRequest = function(options) { 
     if (_beforeRequest) { 
      options = _beforeRequest(options); 
     } 
     if ($localStorage.token) { 
      options.headers = options.headers || {}; 
      options.headers.Authorization = 'Token ' + $localStorage.token; 
     } 
     return options; 
    }; 
}); 

Answer 2

ero imbattuto in questo problema pure. Volevo inviare un'intestazione di autorizzazione insieme a tutti i video e le immagini richiesti al mio sito e utilizzare il tag video nativo HTML5. Dopo aver cercato per molto tempo, non sono stato in grado di trovare alcuna soluzione che consentisse intestazioni personalizzate. Alla fine, ho deciso di creare un cookie all'inizio dell'applicazione. Poiché i cookie vengono inviati su ogni richiesta, sono stato in grado di configurare la mia API Web per cercare questo cookie solo quando sono richieste immagini e video. In questo modo il resto del sito avrebbe continuato a utilizzare l'intestazione di autorizzazione.

ngCookies dovevano essere aggiunti alla domanda:

var app = angular.module('myApp', ['ngCookies']); 

Poi alla partenza dell'applicazione:

app.run(['$cookies', function ($cookies) { 
     $cookies.put("[COOKIE_NAME]", "[TOKEN]"); 
}