如何在NodeJS/HTML中实现带Cookie认证的视频流播放？

数据老陈

2026-8-2

解决方案

1. 修改前端video标签配置

把crossOrigin="anonymous"改成crossOrigin="use-credentials"，这是让video请求自动携带Cookie的核心设置：

<video crossOrigin="use-credentials" id="videoPlayer" controls>
  <source src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/v1/video/get/${props.videoId}`} type="video/mp4" />
</video>

2. 配置后端CORS支持凭证

后端必须开启允许跨域凭证，同时不能用通配符*作为允许的Origin，要指定前端的具体域名。以Express为例：

const cors = require('cors');

app.use(cors({
  origin: process.env.FRONTEND_URL, // 例如 'http://localhost:3000' 或生产环境域名
  credentials: true, // 关键：允许携带凭证
  allowedHeaders: ['Range', 'Content-Type'], // 视频请求会用到Range头，需允许
  methods: ['GET', 'OPTIONS'] // 允许GET请求和OPTIONS预检请求
}));

3. 让认证中间件跳过OPTIONS预检请求

视频的分片请求（带Range头）会先发送OPTIONS预检请求，这个请求不需要携带Token，所以要让认证中间件放行OPTIONS请求：

// 认证中间件示例
function authMiddleware(req, res, next) {
  // 跳过OPTIONS请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  // 你的认证逻辑...
  next();
}