Video.js - HLS => 没有“Access-Control-Allow-Origin”标头 [S3、CloudFront]

问题描述

我在我的应用程序中使用 video.js 插件播放 HLS 视频时遇到问题。 我有一个 HLS 视频（.m3u8、.ts）的 S3 存储并连接到 cloudfront。视频正在 safari 上运行，但在 chrome 上无法正常运行。当我硬重新加载页面（删除缓存，cookies，...）时，它们在 chrome 上工作。

我的配置：

Video.JS：

videojs.Hls.xhr.beforeRequest = function (options) {
      options.headers = {
        "Access-Control-Allow-Origin": "*",};
      return options;
    };

S3 存储桶 CORS：

[
    {
        "AllowedHeaders": [
            "*"
        ],"AllowedMethods": [
            "GET","PUT","POST","HEAD"
        ],"AllowedOrigins": [
            "*"
        ],"ExposeHeaders": [
            "ETag","Access-Control-Allow-Origin","Connection","Content-Length"
        ],"MaxAgeSeconds": 3000
    }
]

CloudFront：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）