在<video>源调用中是否有一种方法可以包含自定义的HTTP头？

Question

我有一个简单的基于videoJS实现的HTML5播放器。为了正确从服务器检索源文件，我需要在视频请求中设置自定义标头。

由于应用程序使用AngularJS，因此我实现了一个拦截器来设置标头：

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

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

问题在于，它没有捕获到对视频的调用，因此没有设置标头（但对其他资源进行了设置）。因此，Angular无法加载视频。这并不奇怪。在开发者工具的网络选项卡中检查后，发现videoJS启动了调用：

但是在videoJS插件中找到正确的方式一直很困难，也没有找到调用的位置。我想知道，是否有一种简单的方法来设置这个调用的头部？无论是使用纯JavaScript、Angular，还是修改videoJS插件都可以。

- ezabaw

---

为什么需要为静态资源设置请求头？ - charlietfl

呼叫经过验证标头的代理。 - ezabaw

除了使用HLS插件，你找到了其他的解决方案吗？ - Javasick

@D0dger 实际上我不得不通过另一个服务器来实现这个，所以我没有测试HLS解决方案。但据我所知，你需要获取videoJS本身的beforeRequest，而不是HLS插件。 - ezabaw

这里是我用过的通用非Angular解决方案：https://dev59.com/ZKLia4cB1Zd3GeqPrvwI#53227237 - Dan Ochiana

Answer 1

在Angular的运行块（run block）中，您可以覆盖videojs插件XHR beforeRequest函数。可能会因人而异，但如果你使用了HLS插件，你可以这样做：

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

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

- blokfyuh

---

你能否提供一些不需要使用HLS插件的建议？ - Javasick

@D0dger：你在使用哪个插件？我猜 VideoJS 插件使用一致的 API，所以每一个插件都应该暴露一个具有 beforeRequest 函数的 xhr 对象。让我知道吧。 - blokfyuh

它公开了xhr，但没有用于视频请求（仅用于字幕和海报），或者我没有理解它的使用方式。目前，我已将令牌添加到请求参数中。 - Javasick

Answer 2

我也遇到了这个问题。我想在每个请求到我的网站的视频和图片中发送授权头，并使用本地的html5视频标签。经过长时间的搜索，我没有找到任何允许自定义头的解决方案。最终，我决定在应用程序开始时创建一个cookie。由于cookie会在每个请求中发送，所以我能够设置我的Web API仅在请求图片和视频时查找此cookie。这样，其余部分的网站将继续使用授权头。

必须将ngCookies添加到应用程序中：

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

然后，在应用程序开始时：

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

- Benjamin

---

能否详细说明一下这个解决方案？您是如何管理为不同的域设置cookie的？您设置了 xhr.withCredentials=true 吗？ - mkorszun