React HTTPS应用调用HLS服务器解决混合内容阻塞问题

方案一：通过Nginx反向代理统一HTTPS入口（推荐） #

无需修改node-media-server的配置，继续让它以HTTP提供HLS服务，利用Nginx的SSL终止能力，将外部HTTPS请求转发到内部HTTP的HLS服务，同时处理媒体文件路径问题。

Nginx配置示例

server {
    listen 443 ssl;
    server_name website.com;

    # 你的SSL证书配置（保留现有内容）
    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    # 处理React/Node.js应用请求（保留现有配置）
    location / {
        proxy_pass http://localhost:3000; # 替换为你的Node.js服务端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 反向代理HLS流请求
    location /live/ {
        # 先尝试直接读取本地媒体文件（提升性能）
        alias /your/absolute/path/to/node-media/media/; # 替换为node-media-server的mediaroot绝对路径
        try_files $uri @hls_proxy;
        
        # 若文件不存在，转发到node-media-server的HTTP服务
        location @hls_proxy {
            proxy_pass http://localhost:8000; # 替换为你的node-media-server HLS端口
            proxy_set_header Host $host;
        }
    }
}

关键说明

• React应用中直接使用https://website.com/live/stream/index.m3u8即可，浏览器不会触发混合内容拦截
• 确保Nginx进程用户（如www-data）拥有mediaroot目录的读取权限，可执行chmod -R 755 /your/mediaroot/path
• 配置完成后重启Nginx：sudo systemctl restart nginx

方案二：修复node-media-server的HTTPS配置 #

若希望直接让node-media-server提供HTTPS服务，可利用其HTTP配置的mediaroot共享特性（HTTPS模块会复用该配置）。

node-media-server配置示例

const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    mediaroot: './media', // 这里设置媒体文件根目录
    allow_origin: '*'
  },
  https: {
    port: 8443,
    key: '/path/to/privkey.pem',
    cert: '/path/to/fullchain.pem'
    // 无需单独设置mediaroot，会自动复用http配置的路径
  }
};

const nms = new NodeMediaServer(config);
nms.run();

配套Nginx优化（可选）

为避免用户输入端口，可在Nginx中添加端口转发：

location /live/ {
    proxy_pass https://localhost:8443;
    proxy_set_header Host $host;
}

排查要点 #

• 清除浏览器缓存，避免旧HTTP请求残留
• 查看node-media-server日志，确认媒体文件生成路径和权限是否正常
• 检查浏览器控制台的具体错误信息，排除路径拼写错误

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