Capacitor项目中启用CapacitorHttp后M3U8视频TS文件加载失败问题解析

问题背景

在Capacitor项目开发中，开发者经常需要处理跨域请求问题。Capacitor提供了CapacitorHttp插件来解决这一难题，但启用该插件后却意外导致了HLS视频流中TS片段文件的加载失败。

问题现象

当开发者在Capacitor配置中启用CapacitorHttp插件时：

plugins: {
  CapacitorHttp: {
    enabled: true,
  },
}

虽然成功解决了自定义API请求的跨域问题，但使用HLS协议播放M3U8视频时，视频片段(TS文件)的请求却会失败。有趣的是，如果禁用CapacitorHttp，其他请求又会出现跨域问题。

问题根源分析

经过深入排查，发现问题出在HLS视频流中TS片段的URL解析上：

1. 相对路径问题：M3U8文件中TS片段的URL通常使用相对路径（如url_462/193039199_mp4_h264_aac_hd_7.ts）

2. Capacitor环境特性：在Capacitor应用中，浏览器环境的navigator.location.href默认值为https://localhost/

3. URL解析机制：浏览器会自动将相对路径基于当前页面URL解析为完整URL。在Capacitor环境下，相对路径会被错误解析为https://localhost/url_462/...而非正确的https://原始域名/url_462/...

解决方案

针对这一问题，开发者可以采取以下解决方案：

1. 使用绝对路径：确保M3U8文件中的所有资源引用都使用完整的绝对URL路径

2. URL重写处理：在HLS播放器配置中添加URL转换逻辑，手动将相对路径转换为正确的绝对路径

3. 选择性启用CapacitorHttp：对于视频流请求保持原生网络请求，仅对API请求使用CapacitorHttp

技术启示

这个问题揭示了混合应用开发中的一个重要原则：在Capacitor等混合框架中，所有网络资源引用都应该使用绝对路径。这是因为：

• 混合应用的"页面URL"与实际资源位置可能不一致
• 框架可能会修改或拦截网络请求
• 不同平台(Android/iOS)对相对路径的处理可能存在差异

最佳实践建议

1. 对于视频流等媒体资源，始终使用完整URL
2. 在开发阶段充分测试各平台的资源加载行为
3. 考虑使用专业的视频播放插件而非纯Web方案
4. 对于复杂的网络请求场景，可以自定义Capacitor的请求拦截逻辑

通过理解这一问题的本质，开发者可以更好地在Capacitor项目中处理各类网络资源加载问题，构建更稳定的混合应用。