hls.js CORS使用AWS Cloudfront解决Cookies问题

Question

我正在尝试使用Cloudfront HLS功能设置视频流，但在获取HLS时遇到了问题。js在请求中发送我的凭据cookie。

我已经将Cloudfront配置为转发Cookie和转发访问控制头。我还将我的S3 CORS策略设置为包括GET、HEAD。

我遇到的问题是，即使我设置了xhr.withCredentials=true，并且在会话中定义了cookie，当我使用chrome控制台查看请求时，我可以看到HLS请求没有cookie。因此，我收到来自 cloudfront 的错误响应，指出我需要包含凭据 Cookie。

代码：首先我向我的服务器发出ajax请求以生成cookie。服务器返回三个存储为浏览器中的会话cookie的Set-Cookies标头：

$.ajax(
{
type: 'GET',
url: 'http://subdomain.mydomain.com:8080/service-
webapp/rest/resourceurl/cookies/98400738-a415-4e32-898c-9592d48d1ad7',
success: function (data) {
        playMyVideo();
},
headers: { "Authorization": 'Bearer XXXXXX' }
});

存储 Cookie 后，将调用测试函数以使用 HLS 播放我的视频.js：

function test(){
  if (Hls.isSupported()) {
  var video = document.getElementById('video');
  var config = {
    debug: true,
    xhrSetup: function (xhr,url) {
        xhr.withCredentials = true; // do send cookie
    xhr.setRequestHeader("Access-Control-Allow-Headers","Content-Type, Accept, X-Requested-With");
        xhr.setRequestHeader("Access-Control-Allow-Origin","http://sybdomain.domain.com:8080");
    xhr.setRequestHeader("Access-Control-Allow-Credentials","true");
    }
  };
  var hls = new Hls(config);
  // bind them together
  hls.attachMedia(video);
  hls.on(Hls.Events.MEDIA_ATTACHED, function () {
    console.log("video and hls.js are now bound together !");
    hls.loadSource("http://cloudfrontDomain.net/small.m3u8");
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
      console.log("manifest loaded, found " + data.levels.length + " quality level");
    });
  });
}
video.play();
}

正如您在下面看到的 HLS 选项和 GET 请求不设置会话 Cookie：

HLS选项请求：

OPTIONS /hls/98400738-a415-4e32-898c-9592d48d1ad7/small.m3u8 HTTP/1.1
Host: cloudfrontDomain.net
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: subdomain.mydomain.com:8080
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36
Access-Control-Request-Headers: access-control-allow-credentials,access-control-allow-headers,access-control-allow-origin
Accept: */*
Referer: http://subdomain.mydomain.com:8080/play.html
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8,es;q=0.6

云端响应：

HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Date: Fri, 07 Jul 2017 00:16:31 GMT
Access-Control-Allow-Origin: http://subdomain.mydomain.com:8080
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Allow-Headers: access-control-allow-credentials, access-control-allow-headers, access-control-allow-origin
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Server: AmazonS3
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
Age: 845
X-Cache: Hit from cloudfront
Via: 1.1 cloudfrontDomain.net (CloudFront)
X-Amz-Cf-Id: XXXXXX

HLS后续GET请求缺少cookies:

GET /hls/98400738-a415-4e32-898c-9592d48d1ad7/small.m3u8 HTTP/1.1
Host: cloudfrontDomain.net
Connection: keep-alive
Origin: http://subdomain.mydomain.com:8080
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36
Access-Control-Allow-Origin: http://subdomain.mydomain.com:8080
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With
Accept: */*
Referer: http://subdomain.mydomain.com:8080/play.html
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8,es;q=0.6

我花了4天时间试图解决这个问题。我做了大量的研究，但就是想不出解决办法。我刚到CORS，所以可能有些原理我不太明白。我原以为如果cookies存储在会话中，那么当您使用凭证启用xhr时，它们就会被设置，但事实似乎并非如此。

我注意到的另一件事是HLS.js生成的GET请求没有设置任何xmlhttpreQuest标头。

感谢您的帮助:)

Answer 1

对于任何可能只在Android版Chrome上遇到这个问题的人来说，我们的问题是浏览器缓存了m3u8文件，并给出了同样的CORS错误。解决方案是在文件url的查询字符串中附加一个时间戳参数:

var config = {
  xhrSetup: function (xhr, url) {
    xhr.withCredentials = true; // do send cookies
    url = url + '?t=' + new Date().getTime();
    xhr.open('GET', url, true);
  }
};
var hls = new Hls(config);

Answer 2

我终于成功了。谢谢迈克尔的帮助！事实证明，这是不理解CORS原则如何工作和正确配置aws服务的混合。主要问题是通过使用cloudfront同时服务于webservice和s3 bucket来避免跨域请求。我想补充的一个重要注意事项是，您在aws中所做的任何更改都必须等待其传播。作为一个新的aws开发人员，我不知道这一点，并对没有效果的更改感到非常沮丧。以下是解决方案:

1)创建您的S3桶。

2）创建CloudFront发行版。

3） 在分发集中，将其设置为web服务域的默认来源。

4） 添加第二个源并在分配中添加行为，以将所有 .m3u8 和 .ts 文件转发到您的 S3 存储桶。

5）添加存储桶来源时，请确保标记限制访问并更新存储桶策略复选框。

6） 在您的存储桶分发行为中，请确保转发所有白名单标头和 Cookie。这都可以在 aws 控制台中设置。

7)如果您在服务中使用不同的端口，请确保您也在分发版中设置了这些端口。

8)转到您的S3存储桶设置，并将CORS配置更新为以下内容:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration> 

如果您使用HLS.js来设置以下配置，这一点很重要:

var config = {
debug: true,
xhrSetup: function (xhr,url) {
xhr.withCredentials = true; // do send cookie
xhr.setRequestHeader("Access-Control-Allow-Headers","Content-Type, Accept, X-Requested-With");
    xhr.setRequestHeader("Access-Control-Allow-Origin","http://sybdomain.domain.com:8080");
xhr.setRequestHeader("Access-Control-Allow-Credentials","true");
}
};
var hls = new Hls(config);

其他重要说明：

当你用你的网络服务提供一个cookie时，你可以设置路径为“/”，它将应用于你的域中的所有请求。