title: Video.js - HLS => No 'Access-Control-Allow-Origin' header [S3, CloudFront]
body: <p>I have a problem to play HLS videos using video.js plugin in my application.
  I have an S3 storage of HLS videos(.m3u8, .ts) and its connected to cloudfront. Videos are working on safari, but they are not working on chrome properly. They work on chrome just when I hard reload the page(remove cache,cookies,...).</p>
  <p><a href="https://i.stack.imgur.com/L1JGn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L1JGn.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/T5JV8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T5JV8.png" alt="enter image description here" /></a></p>
  <h2>My configurations:</h2>
  <p><strong>Video.JS:</strong></p>
  <pre><code>videojs.Hls.xhr.beforeRequest = function (options) {
        options.headers = {
          &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
        };
        return options;
      };
  </code></pre>
  <p><strong>S3 bucket CORS:</strong></p>
  <pre><code>[
      {
          &quot;AllowedHeaders&quot;: [
              &quot;*&quot;
          ],
          &quot;AllowedMethods&quot;: [
              &quot;GET&quot;,
              &quot;PUT&quot;,
              &quot;POST&quot;,
              &quot;HEAD&quot;
          ],
          &quot;AllowedOrigins&quot;: [
              &quot;*&quot;
          ],
          &quot;ExposeHeaders&quot;: [
              &quot;ETag&quot;,
              &quot;Access-Control-Allow-Origin&quot;,
              &quot;Connection&quot;,
              &quot;Content-Length&quot;
          ],
          &quot;MaxAgeSeconds&quot;: 3000
      }
  ]
  </code></pre>
  <p><strong>CloudFront:</strong></p>
  <p><a href="https://i.stack.imgur.com/ANThU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ANThU.png" alt="Cloudfront" /></a></p>
  <p><a href="https://i.stack.imgur.com/7h8Yc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7h8Yc.png" alt="Cloudfront" /></a></p>