Angular前端无法播放Node.js/Express分块传输视频流的问题排查

Angular前端侧错误 #

• FileReader API使用逻辑完全错误：readAsArrayBuffer()是异步执行的方法，本身没有同步返回值，原代码直接将方法调用结果赋值给courseVideo，最终变量值为undefined，无法作为视频源使用。
• 资源格式不匹配：就算正确拿到了Blob响应内容，也没有通过URL.createObjectURL(blob)生成浏览器可识别的临时对象URL，直接将Blob数据绑定给source标签的src属性，无法被video组件解析。
• 技术方案与设计目标冲突：手动通过HttpClient全量拉取视频Blob的方式，完全无法支持分块传输、进度拖动、预加载分段的能力，和预设的分块传输模式完全不匹配。
• HTML属性放置错误：autoplay是video标签的原生属性，原代码将其写在内部的source标签上，不会触发任何自动播放逻辑。

Node.js/Express后端侧错误 #

• Range请求处理逻辑完全缺失：虽然响应头声明了Accept-Ranges: bytes支持分块，但代码没有对请求头中的Range字段做解析，无论前端是否发起分段请求，都直接返回200状态码+全量文件流，既不支持视频进度拖动，也会造成大文件加载时的内存溢出风险。
• 跨域配置缺失：前端运行端口与后端3000端口不一致时，没有配置跨域响应头，会被浏览器同源策略拦截，导致请求失败。
• 安全校验缺失：直接拼接查询参数作为文件路径，没有做路径合法性校验，存在路径遍历攻击风险。

前端实现 #

完全不需要手动发起Blob请求，直接让浏览器原生的video组件处理分块请求即可，大幅减少冗余逻辑：

Courses.Component.html 修正代码 #

<div class="video-player-wrapper">
  <video 
    id="videoPlayer" 
    controls 
    preload="metadata" 
    autoplay
    style="width: 65%; position: fixed; border: 2px solid #7c2c6c;"
  >
    <source [attr.src]="videoStreamUrl" type="video/mp4">
  </video>
</div>

Courses.Component.ts 修正逻辑 #

去掉HttpClient请求Blob的冗余代码，直接拼接接口地址作为视频源：

// 构造带查询参数的视频流地址
const params = new HttpParams()
  .set('id', this.findcourseservice.getUserSelected())
  .set('id2', this.courseContent)
  .set('id3', courseToPlay);
// 直接赋值给绑定的视频源变量
this.videoStreamUrl = `http://localhost:3000/playVideo?${params.toString()}`;

该写法会让浏览器自动针对该URL发起带Range请求头的分段拉取，原生支持进度拖动、分段加载、预加载能力，完全匹配预设的分块传输模式。

后端实现 #

补充完整Range请求处理、跨域配置、路径校验逻辑：

const fs = require('fs');
const path = require('path');

router.get('/playVideo', (req, res) => {
  const viewCourse = req.query.id;
  const viewSubCourse = req.query.id2;
  const videoLink = req.query.id3;
  
  // 路径合法性校验，防止路径遍历
  const baseVideoDir = 'D:/Videos';
  const targetVideoPath = path.join(baseVideoDir, viewCourse, viewSubCourse, videoLink);
  if (!targetVideoPath.startsWith(baseVideoDir)) {
    return res.sendStatus(403);
  }

  const stat = fs.statSync(targetVideoPath);
  const fileTotalSize = stat.size;
  const rangeHeader = req.headers.range;

  // 处理分段Range请求
  if (rangeHeader) {
    const [startStr, endStr] = rangeHeader.replace('bytes=', '').split('-');
    const start = parseInt(startStr, 10);
    const end = endStr ? parseInt(endStr, 10) : fileTotalSize - 1;
    const chunkSize = end - start + 1;

    const responseHeaders = {
      'Content-Range': `bytes ${start}-${end}/${fileTotalSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunkSize,
      'Content-Type': 'video/mp4',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Range'
    };
    res.writeHead(206, responseHeaders);
    fs.createReadStream(targetVideoPath, { start, end }).pipe(res);
  } else {
    // 无Range请求时返回全量文件响应
    const responseHeaders = {
      'Content-Length': fileTotalSize,
      'Accept-Ranges': 'bytes',
      'Content-Type': 'video/mp4',
      'Access-Control-Allow-Origin': '*'
    };
    res.writeHead(200, responseHeaders);
    fs.createReadStream(targetVideoPath).pipe(res);
  }
});

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