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

3 人关注

我正在做一个项目，我需要播放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
这段代码起作用了，签名的cookie也在请求中被发送，但是我开始得到一个新的错误，就是。
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代码；index.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>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>
<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": []
预先感谢你。


            
             
              你能使它发挥作用吗？我试了3天都没有成功。


           
            
             Faisal Shaikh
            
            ：


            
             
              @DzungPV 是的，这对我来说是有效的。


         
          amazon-cloudfront


         
          video.js


         
          hls.js


         
          vivado-hls


        
         
          
          
           Faisal Shaikh
          
         
         
          发布于
          
          2020-12-21


          
           
            
            
             Brian Burton
            
           
           
            发布于
            
            2020-12-30


          
           已采纳


           
            
             答案就在浏览器的错误信息中，"当请求的凭证模式为'include'时，响应中'Access-Control-Allow-Origin'头的值不能是通配符'*'"。  你的S3桶的CORS策略不能对AllowedOrigins值使用通配符。
            
            
             另外，你的空AllowedHeaders值
             
              可能会
             
             从预检请求检查中删除Host值，所以为了安全起见，让我们把它设置为通配符。
            
            
             如果你把你的S3桶的CORS策略更新为这个，它应该能解决这个问题。
            
            "AllowedHeaders": [
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "HEAD"
        "AllowedOrigins": [
            "https://example.com",
            "https://protected.example.com"