XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. AWS S3, Retina.JS

Question

Im trying to get retina.js work on our website, in which the portfolio articles are loaded by ajax.

So retina.js appears to be trying to get hold of the images, but is left with the typical

XMLHttpRequest cannot load http://assets.url.com/images/logo6@2x.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://url.com' is therefore not allowed access. 

Im running Nginx and that has its access control setup, but obviously it needs to be setup on S3 as well, and it is... nice and open like this...

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Ive tried variations including the specific URL but still get the same error message back.

Anyone know what the error could be here, maybe our set isn't setting a request header at all? Maybe our ajax grid is interfering with the retina.js? There is no mention on the retina.js website about needing any special config once the above code is set.

If it makes any difference we're also using Cloudflare for DNS, although everything is turned off at the minute.

Answer 1

The problem was with the way retina.js worked. Finally found a solution thanks to this alternative version on github.

https://github.com/chrishunt/retinajs/blob/master/src/retina.js

Answer 2

Had the same issue and setup with a Rails app and the aws-sdk gem. Goal: upload files directly to S3 via jQuery FileUpload plugin. Not working with error above, even though CORS was set correctly on my S3 bucket.

The one thing I overlooked: When following the tutorial, I set Aws.config.update({ region: eu-west-1 }) in config/initializers/aws.rb. However, the S3 bucket I created on AWS is actually in the eu-central-1 region.

Solution: Set Aws.config.update initializer to the same region you chose earlier in your S3 console :)