我目前正在使用nodejs服务器上的Passport在我的Web应用程序上需要身份验证的每个路由使用JWT。令牌由前端存储，并且所做的每个请求都与Axios实例一起使用，标题"授权"设置为令牌。
一切正常，但是现在我想使用用户上传的显示视频。为此，我想使用相同的机制。问题是使用<video> HTML标签，唯一获得ressource的东西是使用src属性，但是我无法找到一种使其使用"授权"标头的方法，因为它不使用AXIOS。
有没有办法做到这一点，还是我被迫使用媒体源API来实现某种玩家？我还尝试将令牌作为查询字符串将其放在URL中。它确实有效，但是这样做是可以安全的，因为将显示Auth代币(或仅用于视频的新图表(？
注意：(我可以使用Axios下载整个文件，然后将Blob作为SRC，但确实效率低下(
我找不到任何支持此功能的玩家。所有玩家都会使用<video>播放媒体文件时使用浏览器的后备，并且没有办法使用标头来设置身份验证令牌。
添加标头的唯一方法是使用HLS之类的协议时。然后，请求是通过XHR提出的，您可以访问请求标题：
<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<video
id="my_video"
class="video-js"
controls
preload="auto"
width="640"
height="268"
data-setup="{}"
>
</video>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script>
videojs.Hls.xhr.beforeRequest = function(options) {
options.headers = options.headers || {};
options.headers.Authorization = 'Bearer token';
console.log('options', options)
return options;
};
var player = videojs('my_video');
player.ready(function() {
this.src({
src: "https://dl5.webmfiles.org/big-buck-bunny_trailer.webm",
type: "video/webm",
});
});
</script>
</body>
</html>这是我处理类似情况的方式：
-
制作一个握手端点，告诉您的服务器您要请求视频，此端点受身份验证保护，此端点的作用是返回代表即将要求的视频的UUID。
-
视频流端点仅接受从握手返回的UUID。
顺便说一句，我维护了一个会话映射，该会话映射记录每个用户及其相应的令牌，因此，如果我发现一个会话已经过时(例如闲置30分钟(并删除了，则该会话生成的所有UUID也已删除，因此，即使他们以某种方式获得了UUID，也没有人可以访问它们。