Laravel cors 与视频 js (m3u8)答案

【问题标题】：Laravel cors with video js (m3u8)Laravel cors 与视频 js (m3u8)
【发布时间】：2022-08-14 10:39:55
【问题描述】：

我已经为前端安装了一个新的 Laravel 应用程序和新的 ReactJs 项目，用于上传视频，protonemedia/laravel-ffmpeg 用于 HLS 支持的包，上传时没有问题，但是当响应视频第一响应很好但（.ts 文件）将是cors政策
这是控制台错误
[1]：https://i.stack.imgur.com/YATd6.png
这是网络选项卡请求
[2]：https://i.stack.imgur.com/d96gh.png
我知道响应是 200 但响应正文为空且请求颜色为红色

ReactJs 组件文件

import React, { useEffect, useRef, useState } from \"react\";
import videojs from \"video.js\";
import \"video.js/dist/video-js.css\";

const Video = () => {
  const videoNode = useRef(null);
  const [player, setPlayer] = useState(null);
  useEffect(() => {
    videojs.Hls.xhr.beforeRequest = function (options) {
      options.headers = {
        \"Access-Control-Allow-Origin\": \"*\",
        \"Content-Type\": \"application/json\",
      };
      return options;
    };
    if (videoNode.current) {
      const _player = videojs(videoNode.current, {
        fill: true,
        fluid: true,
        autoplay: true,
        controls: true,
        preload: \"metadata\",
        isCorsOrigin: true,
        crossOrigin: \"use-credentials\",
        withCredentials: true,
        sources: [
          {
            src: \"http://127.0.0.1:8000/api/video-get/video.m3u8\",
            type: \"application/x-mpegURL\",
          },
        ],
      });
      setPlayer(_player);
      return () => {
        if (player !== null) {
          player.dispose();
        }
      };
    }
  }, []);

  return (
    <div data-vjs-player>
      <video ref={videoNode} className=\"video-js\"></video>
    </div>
  );
};

export default Video;

Laravel 上传路径

Route::post(\'/video-upload\', function (Request $request) {
    try {
        $videoName = \'video.mp4\';
        Storage::disk(\'temp_videos\')->put($videoName, base64_decode(explode(\',\', $request->post(\'video\'))[1]));
        $lowFormat  = (new X264(\'aac\'))->setKiloBitrate(500);
        $highFormat = (new X264(\'aac\'))->setKiloBitrate(1000);
        FFMpeg::fromDisk(\'temp_videos\')
            ->open($videoName)
            ->exportForHLS()
            ->addFormat($lowFormat, function (HLSVideoFilters $filters) {
                $filters->resize(1280, 720);
            })
            ->addFormat($highFormat)
            ->toDisk(\'public\')
            ->save(\'video.m3u8\');
    } catch (EncodingException $exception) {
        return response()->json([
            \'error\' => $exception->getMessage()
        ], 500);
    }
});

Laravel 读取路线

Route::get(\'/video-get/{playlist}\', function ($playlist) {
    return FFMpeg::dynamicHLSPlaylist()
        ->fromDisk(\'public\')
        ->open($playlist)
        ->setPlaylistUrlResolver(function ($playlist) {
            return \'http://127.0.0.1:8000/api/video-get/\' . $playlist;
        })
        ->setMediaUrlResolver(function ($media) {
            return Storage::disk(\'public\')->url($media);
        });
});

在 laravel 部分我接受了 cors.php 文件中的所有来源

return [
    \'paths\' => [\'api/*\', \'sanctum/csrf-cookie\'],

    \'allowed_methods\' => [\'*\'],

    \'allowed_origins\' => [\'*\'],

    \'allowed_origins_patterns\' => [],

    \'allowed_headers\' => [\'*\'],

    \'exposed_headers\' => [],

    \'max_age\' => 0,

    \'supports_credentials\' => false,
];

我尝试了所有方法，例如使用 header() 函数并在前端使用允许访问源并使用自定义 cors 中间件并到处搜索它，但我没有找到解决方案。
感谢您的帮助

标签： javascript php reactjs laravel video.js

【解决方案1】：

是否可以在清理浏览器历史记录后查看或在隐身模式下打开查看浏览器？
你目前使用的是哪个 laravel 版本？

【讨论】：