Android端Chromium发送凭证问题：Nginx HLS直播401错误排查

阿华AIGC实验室

2026-5-13

Android平台Nginx HLS直播认证失败问题排查与解决

这问题我之前处理过类似的，核心就是Android Chrome在HLS播放时的原生机制和Web端的差异导致的，咱们一步步拆解解决：

问题根源分析

从你提供的日志和现象来看，主要两个关键点：

Android原生播放器接管HLS请求：虽然你页面里用了video.js，但Android Chrome会自动跳过JS播放器，调用系统原生MediaPlayer处理HLS流。而原生播放器完全不遵循video标签的crossorigin="use-credentials"配置，不会携带Authorization凭证，这就导致第二次请求index.m3u8时返回401。
日志中Referer缺失：最后一次请求里的"-"替代了完整URL，这是原生播放器的正常行为——它不是从网页上下文发起的请求，所以不会携带Referer，和凭证问题是连锁反应。

针对性解决方案

方案1：强制使用JS播放器（优先推荐）

让video.js强制接管HLS播放，不让浏览器触发原生播放器逻辑。修改你的页面代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>live stream</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.5.1/video.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script>
</head>
<body>
  <h1>live stream</h1>
  <video id="stream" class="video-js vjs-default-skin" width="840" height="525" style="max-width: 100%" controls crossorigin="use-credentials" preload="none">
    <source src="https://xxxx/live/Stream/index.m3u8" type="application/x-mpegURL">
  </video>
  <script>
    // 新增播放器初始化配置，强制用JS处理HLS
    var player = videojs('stream', {
      html5: {
        hls: {
          overrideNative: true
        }
      }
    });
  </script>
</body>
</html>

这个配置会让video.js禁用浏览器原生HLS支持，完全用JS实现的HLS解析，这样就能遵循crossorigin="use-credentials"配置，在请求index.m3u8和后续TS分片时都携带认证凭证。

方案2：Nginx侧兼容原生播放器请求（兜底方案）

如果部分Android设备还是会绕过JS播放器，你可以在Nginx里调整认证逻辑，用Cookie替代Authorization头做验证——原生播放器会自动携带同域Cookie：

首先在用户首次认证成功时，通过后端设置一个带有效期的认证Cookie（比如auth_token）。
修改Nginx配置，优先验证Cookie，再用Authorization头：

location /live/Stream/ {
  # 检查是否有合法的认证Cookie
  set $auth_valid 0;
  if ($http_cookie ~* "auth_token=([a-f0-9]{32})") {
    # 这里可以结合后端接口验证token有效性，或者直接信任Cookie（根据你的安全需求）
    set $auth_valid 1;
  }
  
  # 如果Cookie无效，再走原有的认证逻辑
  if ($auth_valid = 0) {
    auth_basic "Restricted";
    auth_basic_user_file /path/to/your/.htpasswd;
  }

  # 保留原有的HLS相关配置
  types {
    application/vnd.apple.mpegurl m3u8;
    video/mp2t ts;
  }
}

方案3：完善Nginx CORS配置

确保你的Nginx返回正确的跨域头，避免JS播放器因为CORS问题 fallback到原生：

location /live/Stream/ {
  # 允许指定域名的跨域请求（不能用*，带凭证必须指定具体域名）
  add_header Access-Control-Allow-Origin "https://xxxx";
  add_header Access-Control-Allow-Credentials "true";
  add_header Access-Control-Allow-Methods "GET, OPTIONS";
  add_header Access-Control-Allow-Headers "Authorization, Content-Type";
  
  # 处理OPTIONS预请求
  if ($request_method = OPTIONS) {
    return 204;
  }

  # 原有认证和HLS配置...
}