CODEWITHSUNDEEP
amazon-web-servicesamazon-s3three.jscors
Brad Woods
Brad Woods

Reputation: 1546

Three.js AWS S3 CORS

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>

Upvotes: 3

Views: 2103

Answers (2)

Brad Woods
Brad Woods

Reputation: 1546

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

Upvotes: 2

rdp-cloud
rdp-cloud

Reputation: 56

Have you configured CORS on the S3 bucket?

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

Upvotes: 0

Related Questions