如何将video.js的XHR请求URI改为S3预签名URL？解决片段加载403问题

问题核心原因 #

你遇到的403是因为master.m3u8里的子播放列表、媒体片段都是相对路径，Video.js会自动将这些相对路径拼接成基础S3地址（不带预签名参数）发起请求——而S3的预签名是绑定具体资源URL的，子资源路径没有签名验证自然会被拒绝。设置withCredentials: true无效，是因为这个配置是控制XHR请求是否携带Cookie的，和S3预签名参数无关。

解决方案 #

方案1：服务端修改master.m3u8内容

服务端生成master.m3u8的预签名URL后，先获取该文件的原始内容，遍历其中所有子播放列表、片段的相对路径，为每个子资源单独生成预签名URL，替换掉原有的相对路径，再将修改后的master.m3u8内容返回给前端。

• 优势：无需改动前端代码，完全由服务端处理逻辑，避免前端处理签名的安全风险。

方案2：前端通过Video.js钩子重写子资源URL

利用Video.js的HLS解析器钩子，在解析master.m3u8时自动给所有子资源路径补上预签名参数。示例代码：

const player = videojs('my-player', {
  html5: {
    vhs: {
      withCredentials: true
    },
    hls: {
      parser: {
        overrideNative: true,
        manipulateManifest: (manifest) => {
          // 建议从服务端获取签名基础参数（避免前端暴露敏感信息）
          const s3BaseUrl = 'https://your-bucket.s3.amazonaws.com/';
          // 可复用master的签名参数，或调用服务端接口为每个子资源生成独立签名
          const presignedParams = '?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=...&X-Amz-Date=...&X-Amz-Expires=...&X-Amz-Signature=...';

          // 替换播放列表URL
          if (manifest.playlists) {
            manifest.playlists.forEach(pl => {
              if (pl.uri && !pl.uri.startsWith('http')) {
                pl.uri = `${s3BaseUrl}${pl.uri}${presignedParams}`;
              }
            });
          }

          // 替换媒体片段URL
          if (manifest.segments) {
            manifest.segments.forEach(seg => {
              if (seg.uri && !seg.uri.startsWith('http')) {
                seg.uri = `${s3BaseUrl}${seg.uri}${presignedParams}`;
              }
            });
          }

          return manifest;
        }
      }
    }
  }
});

• 注意：为保证安全，建议前端调用服务端接口动态获取每个子资源的预签名，而非直接复用master的签名参数。

方案3：改用CloudFront签名URL（若使用CloudFront分发）

如果你的S3桶通过CloudFront分发，可以生成CloudFront签名URL——这种签名是针对整个分发路径的，子资源请求会自动继承签名参数（只要路径匹配），无需额外修改前端或m3u8内容。

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