iOS端Video.js无法通过beforeRequest发送请求头问题求助

我给同事开发了一款学习应用，用Video.js做视频播放模块。目前遇到一个头疼的问题：在Android端和所有桌面浏览器（Chrome、Mozilla、Safari）里，Video.js都能正常发送自定义请求头（用来做用户验证和停留时长统计），但iOS端完全发不出这些请求头。

当前的核心代码如下：

function videopresent(){
 videojs.options.hls.overrideNative = true;
 videojs.options.html5.nativeAudioTracks = false;
 videojs.options.html5.nativeTextTracks = false;
 videojs.Hls.xhr.beforeRequest = function(options) {
 headers = {}
 headers['user_Id'] = cookiescope('user_Id');
 headers['user_Policy_code'] = cookiescope('user_Policy_code');
 headers['username'] = cookiescope('username');
 options.headers = headers
 return options;
 }
}

问题根源分析 #

iOS上的Safari（包括App内嵌的WebView环境）对HLS视频的原生处理有特殊限制：即使你全局设置了overrideNative: true，Video.js的HLS polyfill有时候也没法完全接管原生播放逻辑，导致自定义请求头无法被正确附加到视频请求里。另外，iOS的CORS策略比Android和桌面端更严格，跨域场景下自定义头很容易被浏览器拦截。

针对性解决方案 #

这里提供几个经过验证的修复方案，你可以逐一尝试：

• 初始化播放器时明确强制禁用原生HLS
  全局设置的videojs.options.hls.overrideNative在iOS端可能被忽略，建议在初始化播放器时直接在配置里指定：

  // 初始化播放器时的配置
  const player = videojs('your-video-element-id', {
    html5: {
      hls: {
        overrideNative: true // 强制使用Video.js的HLS实现
      },
      nativeAudioTracks: false,
      nativeTextTracks: false
    }
  });
  

• 不要直接覆盖请求头，而是追加自定义字段
  原来的代码直接把options.headers替换成新对象，可能会清空浏览器默认的请求头，导致iOS端的请求处理异常。改成在原有头基础上追加：

  videojs.Hls.xhr.beforeRequest = function(options) {
    // 保留原有请求头，避免覆盖默认值
    options.headers = options.headers || {};
    options.headers['user_Id'] = cookiescope('user_Id');
    options.headers['user_Policy_code'] = cookiescope('user_Policy_code');
    options.headers['username'] = cookiescope('username');
    return options;
  }
  

• 检查并调整服务器端CORS配置
  确保视频资源服务器的CORS响应头允许这些自定义字段，需要添加：

  • Access-Control-Allow-Headers: user_Id,user_Policy_code,username
  • Access-Control-Allow-Credentials: true（如果请求需要携带Cookie）

• 如果是App内嵌WebView，检查WebView设置
  如果你的应用是iOS App内嵌的WebView，需要确认：

  • WKWebView开启了allowsInlineMediaPlayback = true
  • 没有额外的安全策略（比如App Transport Security）限制了请求头的发送

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