Node.js与React.js实现HLS流播放时的CORS错误求助

问题根源 #

你遇到的CORS错误核心原因是：HLS流媒体请求（.m3u8和.ts文件）没有被Express的CORS中间件处理。代码中new hls(server, ...)创建的HLS服务器是直接挂载在Node.js的http.Server实例上的，它会绕过Express的中间件栈直接拦截并处理相关请求，因此你在Express上配置的CORS头不会被添加到HLS请求的响应中。

解决方案 #

方法一：给HTTP Server添加全局CORS处理 #

直接在http.Server实例上添加请求监听，为所有经过该服务器的请求（包括HLS流媒体请求）统一设置CORS头，覆盖Express和HLS服务器的所有请求：

const server = app.listen(PORT);

// 全局处理CORS，作用于所有请求
server.on('request', (req, res) => {
  // 允许指定前端源（生产环境建议替换为实际域名，不要用*）
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
  // 允许的请求头
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With');

  // 处理预检OPTIONS请求，直接返回200结束
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
    return;
  }
});

// 初始化HLS服务器（原有配置不变）
new hls(server, {
  provider: {
    exists: (req, cb) => {
      const ext = req.url.split(".").pop();

      if (ext !== "m3u8" && ext !== "ts") {
        return cb(null, true);
      }
      console.log("path join",__dirname + req.url)
      fs.access(__dirname + req.url, fs.constants.F_OK, function (err) {
        if (err) {
          console.log("url", __dirname + req.url);
          console.log("File not exist");
          return cb(null, false);
        }
        cb(null, true);
      });
    },
    getManifestStream: (req, cb) => {
      const stream = fs.createReadStream(__dirname + req.url);
      cb(null, stream);
    },
    getSegmentStream: (req, cb) => {
      const stream = fs.createReadStream(__dirname + req.url);
      cb(null, stream);
    },
  },
});

方法二：移除HLS服务器，用Express静态资源直接托管 #

如果不需要HLS服务器的额外功能，可直接用Express静态资源服务托管.m3u8和.ts文件，同时确保CORS中间件在静态资源之前加载：

const cors = require('cors');
const corsOptions = {
  origin: 'http://localhost:3000', // 指定前端源，更安全
  credentials: true,
  optionSuccessStatus: 200
};
// 先加载CORS中间件
app.use(cors(corsOptions));

// 加载其他中间件
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 静态资源托管，确保路径匹配请求地址
app.use('/post-processing/data', express.static(__dirname + '/post-processing/data/'));

// 无需初始化HLS服务器，直接启动服务即可
const server = app.listen(PORT);

注意事项 #

• 生产环境禁止使用*作为Access-Control-Allow-Origin，必须指定具体的前端域名，避免跨域安全风险。
• 可通过日志输出验证__dirname + req.url是否指向正确的文件路径，确保.m3u8和.ts文件存在且可访问。

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