HTTPS站点中如何强制音频src使用HTTP而非HTTPS？

这个问题我之前帮不少开发者排查过——本质是浏览器的混合内容安全策略和自动HTTPS升级机制在起作用。你的站点是HTTPS协议，现代浏览器（比如Chrome）为了保障安全，会自动把页面内的HTTP资源请求升级为HTTPS，同时还会限制"混合内容"（HTTPS页面加载HTTP资源），所以你原本写的http://stream.radio.com/mo2被浏览器偷偷换成了HTTPS，但目标电台的服务器没开启HTTPS服务，就出现了ERR_CONNECTION_REFUSED错误。

下面给你几个可行的解决方案，按优先级排序：

1. 优先获取电台的HTTPS流地址 #

这是最安全、最合规的方案。联系电台服务商，索要对应的HTTPS流媒体地址（比如https://stream.radio.com/mo2）。现在大部分正规流媒体服务都支持HTTPS，用HTTPS地址既符合浏览器的安全要求，也不会出现混合内容的警告或限制。

2. 通过内容安全策略（CSP）允许加载指定的HTTP音频资源 #

如果暂时拿不到HTTPS地址，你可以通过配置CSP来告诉浏览器：允许加载这个特定的HTTP音频资源，不要强制升级或阻止它。

方式一：服务器端配置HTTP头 #

在你的Web服务器（比如Nginx、Apache）里添加以下HTTP头：

Content-Security-Policy: media-src http://stream.radio.com;

这个规则的意思是：允许页面从http://stream.radio.com加载媒体资源（包括音频），不会强制升级成HTTPS，也不会阻止这个请求。

方式二：HTML页面添加meta标签（适合静态页面） #

如果无法修改服务器配置，可以在HTML的<head>里添加这个meta标签：

<meta http-equiv="Content-Security-Policy" content="media-src http://stream.radio.com;">

注意：部分浏览器对meta标签形式的CSP支持有限，但Chrome、Firefox等主流浏览器都能正常识别。

3. 检查浏览器插件的影响 #

如果上面的方法都没生效，可能是用户安装了类似HTTPS Everywhere这类强制升级HTTPS的插件。你可以提醒用户：在你的站点上禁用该插件的自动升级规则，就能正常加载HTTP音频了。不过这是用户端的操作，你没法直接控制，只能作为补充说明。

⚠️ 重要提醒：混合内容（HTTPS站点加载HTTP资源）会让浏览器标记你的站点为"不安全"，而且未来浏览器可能会完全禁止这类请求，所以还是尽量优先使用HTTPS流地址。

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