title: AWS: How can I allow multiple domains in an S3 CORS configuration?
body: <p>I've been having an issue across many of my sites that rely on S3 as an origin for Cloudfront. However, I'm having issues with allowing multiple domains (instead of a global <code>*</code> allowed).</p>
  
  <p>I have followed the documentation <a href="http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html" rel="noreferrer">here</a> (first config). And found a few other random SO or forum answers here and there (second config)</p>
  
  <p>Any help is appreciated.</p>
  
  <p>I have setup CORS Rules that look like both of the following:</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;https://example.com&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;HEAD&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;DELETE&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;PUT&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
          &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
          &lt;AllowedHeader&gt;Authorization&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
      &lt;CORSRule&gt;
          &lt;AllowedOrigin&gt;http://example.com&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
          &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
      &lt;CORSRule&gt;
          &lt;AllowedOrigin&gt;https://staging.example.com&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
          &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
      &lt;CORSRule&gt;
          &lt;AllowedOrigin&gt;http://example.dev&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
          &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p><strong>AND</strong></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;https://example.com&lt;/AllowedOrigin&gt;
          &lt;AllowedOrigin&gt;http://example.com&lt;/AllowedOrigin&gt;
          &lt;AllowedOrigin&gt;https://staging.example.com&lt;/AllowedOrigin&gt;
          &lt;AllowedOrigin&gt;http://example.dev&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;HEAD&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;DELETE&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;PUT&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
          &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
          &lt;AllowedHeader&gt;Authorization&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>I keep getting the font origin error on all sites <strong>except</strong> <code>https://example.com</code>:</p>
  
  <blockquote>
    <p>Font from origin '<a href="http://CLOUDFRONTURL" rel="noreferrer">http://CLOUDFRONTURL</a>' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://example.dev" rel="noreferrer">http://example.dev</a>' is therefore not allowed access.</p>
  </blockquote>
  
  <p>AND</p>
  
  <blockquote>
    <p>Font from origin '<a href="http://CLOUDFRONTURL" rel="noreferrer">http://CLOUDFRONTURL</a>' has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header has a value '<a href="https://example.com" rel="noreferrer">https://example.com</a>' that is not equal to the supplied origin. Origin '<a href="http://example.dev" rel="noreferrer">http://example.dev</a>' is therefore not allowed access.</p>
  </blockquote>