title: S3: No Access-Control-Allow-Origin header is present on the requested resource
body: <p>I've got a S3 bucket in the <code>eu-west-1</code> region, let's call it <code>my-bucket</code>.</p>
  
  <p>In that bucket there's a picture, let's call it <code>some-file.jpg</code>.</p>
  
  <p>If I access both these urls through the browser, I can retrieve that picture (all objects in the bucket are public) (remember that these are examples, not real-life urls):</p>
  
  <p><a href="https://my-bucket.s3.amazonaws.com/some-file.jpg" rel="noreferrer">https://my-bucket.s3.amazonaws.com/some-file.jpg</a></p>
  
  <p><a href="https://s3-eu-west-1.amazonaws.com/my-bucket/some-file.jpg" rel="noreferrer">https://s3-eu-west-1.amazonaws.com/my-bucket/some-file.jpg</a></p>
  
  <p>However, I'm trying to get some info on that picture, and for that I'm using vibrant.js, which attempts to retrieve the file.</p>
  
  <p>However, it fails when the url is: <a href="https://my-bucket.s3.amazonaws.com/some-file.jpg" rel="noreferrer">https://my-bucket.s3.amazonaws.com/some-file.jpg</a>, with the following CORS error:</p>
  
  <pre><code>Access to Image at 'https://my-bucket.s3.amazonaws.com/some-file.jpg' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access
  </code></pre>
  
  <p>I've made sure that the bucket's CORS policy accepts all origins:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
  &lt;CORSRule&gt;
      &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
      &lt;AllowedMethod&gt;PUT&lt;/AllowedMethod&gt;
      &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
      &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
  &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>My guess is that <a href="https://s3-eu-west-1.amazonaws.com/my-bucket/some-file.jpg" rel="noreferrer">https://s3-eu-west-1.amazonaws.com/my-bucket/some-file.jpg</a> sends the <code>Access-Control-Allow-Origin</code> and the other one doesn't. How can I solve this?</p>