当我把鼠标悬停在我的图片上时，Netflix的克隆应该有一个自动播放的视频。相反，我收到此错误交叉源读取阻塞（CORB）阻止了带有MIME类型text/html的跨源响应https://www.youtube.com/watch?v=T6DJcgm3wNY。有关详细信息，请参阅https://www.chromestatus.com/feature/5629709824032768。视频从来不会只出现来自我的数据库的原始图片。我使用json将我的信息发送到MongoDB。如何从我数据库MongoDB中播放视频？

清单项目.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;