本文介绍如何在前后端分离架构下，安全地流式传输受保护的 mp4 视频：前端通过 `crossorigin="use-credentials"` 携带 cookie 发起请求，后端从 cookie 解析 jwt 或会话令牌完成鉴权，并正确处理 http range 请求以支持拖拽、暂停等播放功能。
要在浏览器中播放需身份验证的视频流，关键在于让视频 <source> 请求能携带认证凭证（如 Cookie），并确保服务端能识别该凭证、校验权限，同时仍支持标准的 HTTP 范围请求（Range / 206 Partial Content）——这是实现快进、拖拽、缓冲等现代播放体验的基础。
✅ 前端：启用凭据传递与正确配置 video 标签
默认情况下，<video> 标签发起的资源请求不会发送 Cookie（即使已登录），这是浏览器的安全限制。必须显式启用凭据模式：
<video
controls
crossOrigin="use-credentials" <!-- 关键：允许携带 Cookie -->
preload="metadata">
<source
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/v1/video/get/${props.videoId}`}
type="video/mp4" />
</video>⚠️ 注意事项：
- crossOrigin="anonymous" ❌（不发送 Cookie，无法鉴权）
- crossOrigin="use-credentials" ✅（发送 Cookie，但要求服务端响应头包含 Access-Control-Allow-Credentials: true）
- 不可省略 preload="metadata"（提升首帧加载体验）
- 确保你的前端域名与后端 API 域名满足 CORS 策略（同源或已配置合法跨域）
✅ 后端：从 Cookie 提取 Token 并集成鉴权中间件
由于视频请求由浏览器自动发起（非 fetch/axios），它无法手动设置 Authorization 头，但会自动携带同域 Cookie。因此，你需要：
立即学习“前端免费学习笔记（深入）”；
- 在认证中间件中优先从 Cookie 解析 token（例如 token 或 session_id 字段）；
- 确保该中间件在视频路由之前执行；
- 若鉴权失败，直接返回 401，中断流式响应。
示例 Express 中间件（兼容 Header + Cookie 双模式）：
// auth.middleware.js
const jwt = require('jsonwebtoken');
const authenticate = (req, res, next) => {
// 1. 优先尝试从 Cookie 获取 token（适用于 video 请求）
const token = req.cookies?.token ||
req.headers.authorization?.replace('Bearer ', '');
if (!token) {
return res.status(401).json({ message: 'Access denied: No token provided' });
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = decoded;
next();
} catch (err) {
res.status(403).json({ message: 'Invalid or expired token' });
}
};
module.exports = authenticate;然后挂载到视频路由：
const express = require('express');
const router = express.Router();
const fs = require('fs').promises;
router.get('/v1/video/get/:id', authenticate, async (req, res) => {
const { id } = req.params;
if (!id) return res.status(500).json({ message: 'Invalid request' });
// ✅ 此时 req.user 已存在，可做细粒度权限检查（如：用户是否有权访问该视频）
// if (!await canViewVideo(req.user.id, id)) {
// return res.status(403).json({ message: 'Forbidden' });
// }
const videoPath = `videos/${id}.mp4`;
let videoStat;
try {
videoStat = await fs.stat(videoPath);
} catch (e) {
return res.status(404).json({ message: 'Video not found' });
}
const fileSize = videoStat.size;
const videoRange = req.headers.range;
if (videoRange) {
const parts = videoRange.replace(/bytes=/, '').split('-');
const start = parseInt(parts[0], 10);
const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
const chunkSize = end - start + 1;
const file = fs.createReadStream(videoPath, { start, end });
res.writeHead(206, {
'Content-Range': `bytes ${start}-${end}/${fileSize}`,
'Accept-Ranges': 'bytes',
'Content-Length': chunkSize,
'Content-Type': 'video/mp4',
'Access-Control-Allow-Credentials': 'true', // ✅ 必须响应此头
'Access-Control-Allow-Origin': 'https://your-frontend-domain.com', // 显式指定，不可为 *
});
file.pipe(res);
} else {
res.writeHead(200, {
'Content-Length': fileSize,
'Content-Type': 'video/mp4',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Origin': 'https://your-frontend-domain.com',
});
fs.createReadStream(videoPath).pipe(res);
}
});
module.exports = router;? 补充安全建议
- Cookie 设置务必安全：后端设 Cookie 时应启用 httpOnly, secure, sameSite: 'lax'（或 'strict'），防止 XSS 泄露；
- 避免 token 暴露在 URL 中：切勿将 token 拼入 src 查询参数（易被日志/代理记录）；
- 视频路径需防遍历：对 id 做白名单校验或使用 UUID，避免 ../../../etc/passwd 类攻击；
- 考虑 CDN 或对象存储代理：生产环境建议用 Nginx 或 Cloudflare 实现鉴权转发，减轻 Node.js 流式压力。
通过以上配置，你就能在保障安全的前提下，为用户提供丝滑、可交互的受控视频播放体验。
