title: Unable to play HLS m3u8 file with AWS CloudFront Signed Cookies
body: <p>I am working on a project where I will need to play HLS encrypted video (.m3u8) file. I am using CloudFront and signed cookies to secure the content. I am able to play .m3u8 file without signed cookies but when I use signed cookies then cookies do not get send in requests.</p>
  <p>I am using the alternate domain for CloudFront distribution and I confirm that apart from .m3u8 file I am able to access all other files using signed cookies.</p>
  <p>After research, I found that if I set <code>withCredentials</code> to true like the following code then signed cookies will be send in request:</p>
  <pre><code>player.ready(function() {
      player.src({
          src: 'https://protected.example.com/output-plain/art.m3u8',
          type: 'application/x-mpegURL',
          withCredentials: true
      });
  });
  </code></pre>
  <p>This code works and signed cookies are getting send in request however I started getting a new error which is:</p>
  <p><em><code>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.</code></em></p>
  <p>Then I found that I have to set <code>Access-Control-Allow-Credentials</code> to true. however, this does not work for me.</p>
  <p>I am using video.js library, I have also tried hls.js and getting the same error and stuck at same place.</p>
  <p>I am stuck on this issue for the last 7 days and I think AWS docs are really overwhelming, I have referred many questions on SO and issues on Github but still no luck. Hope someone will help me here.</p>
  <p>Here is the screenshot of CloudFront distribution behavior:</p>
  <p><a href="https://i.stack.imgur.com/JM5YD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JM5YD.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/pbUJX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pbUJX.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/iGgoZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iGgoZ.png" alt="enter image description here" /></a></p>
  <p>And here is my php and js code; index.php:</p>
  <pre><code>&lt;?php
  
  header(&quot;Access-Control-Allow-Origin: https://protected.example.com&quot;);
  header(&quot;Access-Control-Allow-Credentials: true&quot;);
  header(&quot;Access-Control-Max-Age: 1000&quot;);
  header(&quot;Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding&quot;);
  header(&quot;Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE&quot;);
  
  ?&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link href=&quot;https://vjs.zencdn.net/7.10.2/video-js.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;video
          id=&quot;video_player&quot;
          class=&quot;video-js&quot;
          controls
          preload=&quot;auto&quot;
          poster=&quot;//vjs.zencdn.net/v/oceans.png&quot;
          data-setup='{}'
          width=600 height=300&gt;
        
      &lt;/video&gt;
  
  &lt;script src=&quot;https://vjs.zencdn.net/7.10.2/video.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
      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
          });
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here is S3 bucked CORS Policy:</p>
  <pre><code>[
      {
          &quot;AllowedHeaders&quot;: [
              &quot;&quot;
          ],
          &quot;AllowedMethods&quot;: [
              &quot;POST&quot;,
              &quot;GET&quot;,
              &quot;PUT&quot;,
              &quot;HEAD&quot;
          ],
          &quot;AllowedOrigins&quot;: [
              &quot;*&quot;
          ],
          &quot;ExposeHeaders&quot;: []
      }
  ]
  </code></pre>
  <p>Thank you in advance.</p>