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>

Answer 1

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

Answer 2

Have you configured CORS on the S3 bucket?

http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html