title: hls.js CORS using AWS Cloudfront issues with Cookies
body: <p>I'm trying to set up a video streaming using Cloudfront HLS capabilities but I'm having trouble getting Hls.js to send my credential cookies in the request.</p>
  
  <p>I already have Cloudfront configured to forward cookies and to forward Access-control headers. I also have set my S3 CORS policies to include GET, HEAD.</p>
  
  <p>The problem I'm having is that even though I'm setting the xhr.withCredentials=true and the cookies are defined in the session, when I look at the request using chrome console, I can see that the HLS request has no cookies. As a result I get an error response from cloudfront saying I need to include the credential cookies.</p>
  
  <p>Code:
  First I do an ajax request to my server to generate the cookies. The server returns three Set-Cookies headers stored as session cookies in the browser:</p>
  
  <pre><code>$.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' }
  });
  </code></pre>
  
  <p>Once the cookies are stored the test function is called to play my video using HLS.js:</p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>As you can see below HLS OPTIONS and GET request do not set the session cookies:</p>
  
  <p>HLS OPTIONS request:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>CloudFront response:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>HLS subsequent GET request missing the cookies:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I've spent 4 days trying to figure this out. I've done plenty of research but I just can't figure out the solution. I'm new to CORS so maybe I'm not understanding some principle. I thought if the cookies are stored in the session they would get set if you enabled xhr with credentials but it doesn't seem to be the case.</p>
  
  <p>Another thing I noted is that the GET request generated by HLS.js is not setting any xmlhttprequest header.</p>
  
  <p>Thanks for your help :)</p>