Netflix克隆项目：hover图片自动播放遇CORB错误及MongoDB视频播放问题

我正在开发一个Netflix克隆项目，想要实现鼠标悬停在影片图片上时自动播放视频，但出现了**Cross-Origin Read Blocking (CORB)**错误，该错误阻止了跨源响应https://www.youtube.com/watch?v=T6DJcgm3wNY（MIME类型为text/html）。视频无法正常加载，仅显示来自MongoDB数据库的原始图片。我已通过JSON将信息存入MongoDB，请问如何实现从MongoDB读取视频并正常播放？

Listitem.jsx

import React, { useState, useEffect } from "react";
import "./listItem.scss";
import axios from "axios";
import { Link } from "react-router-dom";

const ListItem = ({ index, item }) => {
  const [isHovered, setIsHovered] = useState(false);
  const [movie, setMovie] = useState({});
  useEffect(() => {
    const getMovie = async () => {
      try {
        const res = await axios.get("/movies/find/" + item, {
          method: "get",
          headers: {
            ContentType: "text/json",
            accept: "text/json",
            token:
              "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzYTA1ZjliZTRiZmEzYTBhOWMxYTQ5ZCIsImlzQWRtaW4iOnRydWUsImlhdCI6MTY3MjYyMTE3OCwiZXhwIjoxNjczMDUzMTc4fQ.QcM-LpBXyuYLIUi004CIP99aYqVDua2WNaiIspCawKY",
          },
        });
        setMovie(res.data);
      } catch (error) {
        console.log(error);
      }
    };
    getMovie();
  }, [item]);

  return (
    <Link to={{ pathname: "/watch", movie: movie }}>
      <div
        className="listItem"
        style={{ left: isHovered && index * 225 - 50 + index * 2.5 }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <img src={movie.img} alt="" />
        {isHovered && (
          <div>
            <video
              src={movie.video}
              autoPlay={true}
              loop
              // name="Access-Control-Allow-Origin"
              // value="http://localhost:3000"
            />
            <div className="itemInfo">
              <div className="icons">
                <PlayArrow />
                <Add />
                <ThumbUpAltOutlined />
              </div>
              <div className="itemInfoTop">
                <span>{movie.duration}</span>
                <span className="limit">+{movie.limit}</span>
                <span>{movie.year}</span>
              </div>
              <div className="desc">{movie.desc}</div>
              <div className="genre">{movie.genre}</div>
            </div>
          </div>
        )}
      </div>
    </Link>
  );
};

export default ListItem;

问题根源与解决办法 #

1. CORB错误的直接原因 #

你把YouTube的网页URL直接放到<video>标签的src属性里，这是错误操作——YouTube的watch?v=xxx是HTML页面，不是视频文件，浏览器会因为跨源且MIME类型不匹配触发CORB拦截。

2. 正确的视频播放方案 #

方案一：使用自有视频资源

• 不要把视频文件直接存在MongoDB的JSON文档中，应该将视频上传到云存储（如阿里云OSS、AWS S3）或自己服务器的静态资源目录，然后把视频文件的直接访问URL存在MongoDB的video字段里。
• 确保后端配置CORS，允许前端域名（如http://localhost:3000）访问该视频资源。
• 修改前端<video>标签，添加muted属性（浏览器要求自动播放必须静音）：

  <video
    src={movie.video}
    autoPlay
    loop
    muted
    playsInline
  />
  

方案二：使用YouTube视频

• 不能直接用网页URL，改用YouTube的嵌入链接格式，用<iframe>替代<video>标签：

  <iframe
    src={`https://www.youtube.com/embed/${movie.videoId}?autoplay=1&loop=1&mute=1&playlist=${movie.videoId}`}
    frameBorder="0"
    allow="autoplay; encrypted-media"
  />
  

  备注：mute=1是浏览器自动播放要求，playlist参数用于实现循环播放，MongoDB中只需存储视频ID（如T6DJcgm3wNY）即可。

3. 后端CORS配置示例（Node.js/Express） #

如果视频资源是自己服务器提供的，需在后端配置CORS：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 你的前端域名
  credentials: true
}));

内容的提问来源于stack exchange，提问作者john s