设置no-referrer后IE11无法播放HTML5视频的技术求助

这个问题的核心原因是IE11对referrer元标签的no-referrer值存在兼容性bug——当全局设置该值后，IE11在请求媒体资源（尤其是HLS这类分片流媒体）时，会错误地完全剥离请求头中的Referer字段，而很多视频CDN、流媒体服务依赖Referer进行防盗链验证，或是IE11自身的媒体请求处理逻辑在无Referer时出现异常，最终导致视频无法加载播放。

下面是几个可行的解决方案：

方案1：针对IE11全局移除no-referrer设置 #

如果业务允许对IE11放宽referrer限制，这是最简单的解决方式。可以通过IE条件注释或者JS检测来实现：

方式A：使用IE条件注释（仅针对非IE11生效） #

直接在HTML的<head>中添加带条件注释的meta标签，让IE11自动忽略它：

<!--[if !IE 11]> -->
<meta name="referrer" content="no-referrer"/>
<!-- <![endif]-->

方式B：通过JavaScript动态检测并调整 #

如果条件注释不符合你的代码规范，也可以用JS检测IE11后动态移除或修改referrer meta：

// 检测IE11的特征：Trident/7.0 且 rv:11.0
if (navigator.userAgent.includes('Trident/7.0') && navigator.userAgent.includes('rv:11.0')) {
  const referrerMeta = document.querySelector('meta[name="referrer"]');
  if (referrerMeta) {
    // 直接移除meta标签
    referrerMeta.remove();
    // 若业务需要保留部分referrer策略，可改为IE11支持的"origin"值
    // referrerMeta.content = "origin";
  }
}

方案2：仅针对视频请求调整referrer策略（全局保留no-referrer） #

如果业务要求全局必须保留no-referrer，可以针对视频播放器的请求单独设置referrer。不过IE11的XMLHttpRequest不支持referrerPolicy属性，我们可以通过以下方式绕过：

对于使用videojs-contrib-hls的场景，可以自定义HLS的请求拦截器，模拟正常请求的Referer头（注意：IE11不允许手动设置Referer头，所以这个方式可能需要配合服务器端放宽防盗链规则，或是使用同源视频资源）：

const player = videojs('my_video_1');

// 针对HLS请求添加拦截逻辑
if (player.hls) {
  player.hls.xhr.beforeRequest = function(options) {
    // 仅在IE11下补充Referer头
    if (navigator.userAgent.includes('Trident/7.0') && navigator.userAgent.includes('rv:11.0')) {
      // 填写当前页面的URL作为Referer
      options.headers['Referer'] = window.location.href;
    }
    return options;
  };
}

player.src({ src: 'http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8', type: 'application/x-mpegURL' });

注意：这种方式依赖播放器的请求拦截能力，不同播放器的实现可能不同。如果服务器严格校验Referer的来源，需要确保手动设置的Referer符合服务器的防盗链规则。

方案3：服务器端调整防盗链规则（如果可控） #

如果你的视频资源是自己的CDN托管，可以在服务器端针对IE11的请求放宽防盗链验证——当请求来自IE11且无Referer时，允许媒体资源的访问。比如在Nginx或Cloudflare的配置中添加针对IE11 User-Agent的例外规则。

内容的提问来源于stack exchange，提问作者user2349843