Three.js AWS S3 CORS

Question

I'm trying to use an image from a AWS S3 bucket as a texture in three.js. I get the following error -

Access to Image at 'https://s3-a...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I have set my CORS settings so there is no issue viewing the images in an tag. Following Three.js threads I've also tried using

myImage.crossOrigin = "anonymous"
myImage.crossOrigin = "" 
THREE.ImageUtils.crossOrigin = ""
THREE.ImageUtils.crossOrigin = "anonymous"

Update: CORS settings on s3 bucket are as follows -

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedOrigin>http://*</AllowedOrigin>
        <AllowedOrigin>https://*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Being able to load the image using the img tag doesn’t mean you’ve got CORS set up correctly on the server. Cross-origin img elements work fine without CORS. — sideshowbarker
Try using curl or something to request the image and check the response headers. For example, curl -i -H "Origin: http://localhost:3000/" https://s3-a/path-to-image. If you don’t see an Access-Control-Allow-Origin header in the response from that then CORS is not configured correctly on the server. — sideshowbarker
Does CORS work with the hostname localhost? I don't think it does. Try updating the cors config and using http://lvh.me:3000 to access your test site. The lvh.me hostname is a test that is equivalent to "localhost." You can also use www.127.0.0.1.xip.io:3000, and there are probably others. — Michael - sqlbot
Your right, there is no 'Access-Control-Allow-Origin' in the response header. Can't find any documentation that states how to s3 to add this when serving images. I would of thought you could do it through an <ExposeHeader> tag but there no documentation relating to cross-origin docs.aws.amazon.com/AmazonS3/latest/API/… — Brad Woods
Does it still fail if you use an http:// URL for the image instead of an https:// URL? If you remove the <AllowedOrigin>http://*</AllowedOrigin> and <AllowedOrigin>https://*</AllowedOrigin> lines from your CORS config XML document does that change anything? — sideshowbarker

Brad Woods Brad Woods · Accepted Answer · 2017-03-01T11:49:19

The problem was that I was using ImageUtils instead of textureLoader. I think ImageUtils is deprecated...

Three.js AWS S3 CORS

2 Answers