Angular HTTP拦截器对HTML5媒体元素发起的请求不生效如何解决

问题根因 #

Angular的HttpInterceptor仅对通过@angular/common/http包中HttpClient发起的请求生效，HTML5的video标签是浏览器原生发起的资源请求，完全不经过Angular的HTTP请求层，因此拦截器无法为这类请求自动添加鉴权头。

可行解决方案 #

方案1：Blob预加载生成临时URL（适合小体积视频） #

通过HttpClient请求完整视频资源（自动触发拦截器添加鉴权头），拿到Blob二进制数据后生成浏览器临时可用的ObjectURL赋值给video标签的src属性即可。
组件代码示例：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  template: `<video *ngIf="videoUrl" [src]="videoUrl" controls></video>`
})
export class VideoPlayComponent implements OnInit, OnDestroy {
  videoUrl: string | null = null;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('你的视频接口地址', { responseType: 'blob' })
      .subscribe(blob => {
        // 生成临时URL
        this.videoUrl = URL.createObjectURL(blob);
      });
  }

  ngOnDestroy(): void {
    // 组件销毁时释放内存，避免内存泄漏
    if (this.videoUrl) {
      URL.revokeObjectURL(this.videoUrl);
    }
  }
}

方案2：JWT放入URL查询参数（改造成本最低） #

直接将JWT令牌拼接到视频请求的URL参数中，后端调整鉴权逻辑，兼容从查询参数中获取令牌。

注意：HTTPS协议下查询参数也是加密传输的，不会明文泄露，但需要注意服务端日志不要打印完整URL，避免令牌被日志收集系统泄露。
前端模板示例：

<video [src]="`你的视频接口地址?token=${jwtToken}`" controls></video>

后端Express鉴权中间件示例：

const jwt = require('jsonwebtoken');

function authMiddleware(req, res, next) {
  // 优先从header取token，没有就从query参数取
  let token = req.headers.authorization?.split(' ')[1] || req.query.token;
  if (!token) return res.sendStatus(401);
  try {
    const decoded = jwt.verify(token, '你的JWT密钥');
    req.user = decoded;
    next();
  } catch (err) {
    return res.sendStatus(403);
  }
}

方案3：MediaSource Extensions实现流式加载（适合大体积视频） #

如果视频体积较大，预加载全量Blob体验差，可以使用浏览器的MediaSource API，通过HttpClient分段请求视频切片，所有切片请求都会走Angular的HTTP拦截器自动加鉴权头，同时支持拖动进度、边下边播。
这个方案需要后端支持视频范围请求（Accept-Ranges），前端示例逻辑如下：

// 简化示例，完整实现需要处理范围请求、缓冲等逻辑
async loadVideo() {
  const mediaSource = new MediaSource();
  this.videoUrl = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', async () => {
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    // 用HttpClient请求视频片段
    const chunk = await this.http.get('你的视频接口地址', {
      responseType: 'arraybuffer',
      headers: { Range: 'bytes=0-1048575' } // 按需请求切片范围
    }).toPromise();
    sourceBuffer.appendBuffer(chunk);
    // 后续按需加载剩余切片
  });
}

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