无法使用 AWS CloudFront 签名 Cookies 播放 HLS m3u8 文件

Question

我正在做一个需要播放 HLS 加密视频 (.m3u8) 文件的项目。 我正在使用 CloudFront 并签署 cookies 来保护内容。 我可以在没有签名的 cookies 的情况下播放.m3u8 文件，但是当我使用签名的 cookies 时，cookies 不会收到发送请求。

我正在使用备用域进行 CloudFront 分发，并且我确认除了 .m3u8 文件之外，我还可以使用签名的 cookies 访问所有其他文件。

经过研究，我发现如果我像下面的代码一样将withCredentials设置为 true，那么签名的 cookies 将在请求中发送：

player.ready(function() {
    player.src({
        src: 'https://protected.example.com/output-plain/art.m3u8',
        type: 'application/x-mpegURL',
        withCredentials: true
    });
});

此代码有效并且签名的 cookies 正在收到发送请求，但是我开始收到一个新错误，即：

Access to XMLHttpRequest at 'https://protected.example.com/output-plain/art.m3u8undefined' from origin 'https://example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

然后我发现我必须将Access-Control-Allow-Credentials设置为 true。 但是，这对我不起作用。

我正在使用 video.js 库，我也尝试过 hls.js 并得到相同的错误并卡在同一个地方。

在过去的 7 天里，我一直被困在这个问题上，我认为 AWS 文档真的是压倒性的，我已经提到了很多关于 SO 的问题和关于 Github 的问题，但仍然没有运气。 希望有人会在这里帮助我。

这是 CloudFront 分配行为的屏幕截图：

这是我的 php 和 js 代码； 索引.php：

<?php

header("Access-Control-Allow-Origin: https://protected.example.com");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

?>

<!DOCTYPE html>
<html>
<head>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>


<body>

<video
        id="video_player"
        class="video-js"
        controls
        preload="auto"
        poster="//vjs.zencdn.net/v/oceans.png"
        data-setup='{}'
        width=600 height=300>
      
    </video>

<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>

<script>
    var player = videojs('video_player')

    player.responsive(true);

    player.ready(function() {
        player.src({
            src: 'https://protected.example.com/output-plain/art.m3u8',
            type: 'application/x-mpegURL',
            withCredentials: true
        });
    });
</script>

</body>
</html>

这是 S3 降压 CORS 策略：

[
    {
        "AllowedHeaders": [
            ""
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

先感谢您。

Answer 1

答案在浏览器的错误消息中，“当请求的凭据模式为 'include' 时，响应中的 'Access-Control-Allow-Origin' header 的值不能是通配符 '*'。” 您的 S3 存储桶的 CORS 策略不能对 AllowedOrigins 值使用通配符。

此外，您的空 AllowedHeaders 值可能会从预检请求检查中删除 Host 值，因此为了安全起见，我们将其设置为通配符。

如果您将 S3 存储桶的 CORS 策略更新为此，它应该可以解决问题：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://example.com",
            "https://protected.example.com"
        ],
        "ExposeHeaders": []
    }
]

无法使用 AWS CloudFront 签名 Cookies 播放 HLS m3u8 文件

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-12-30 11:58:59

无法使用 AWS CloudFront 签名 Cookies 播放 HLS m3u8 文件

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-12-30 11:58:59

解决方案1
2 已采纳 2020-12-30 11:58:59