本文介绍如何在前后端分离架构下，安全地流式传输受保护的 mp4 视频：前端通过 `crossorigin=”use-credentials”` 携带 cookie 发起请求，后端从 cookie 解析 jwt 或会话令牌完成鉴权，并正确处理 http range 请求以支持拖拽、暂停等播放功能。
要在浏览器中播放需身份验证的视频流，关键在于让视频
✅ 前端：启用凭据传递与正确配置 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 流式压力。
通过以上配置，你就能在保障安全的前提下，为用户提供丝滑、可交互的受控视频播放体验。