CORS issue with AWS s3 and TextureLoader

[Rcreators_Websolutions]

Hello,

I have added code for TextureLoader with loading manager. I was using local images for texture and it was working fine. Now i have moved all resources to S3 buket and cause of it TextureLoader is not loading images. Below is code for same.

var manager = new THREE.LoadingManager();

								manager.onLoad = function () {}
								var textureLoader = new THREE.TextureLoader(manager);
var mat_map = "https://planova3d.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/10/26043628/heather-texture.jpg";
								textureLoader.load(mat_map, function (texture) {
								 	texture.wrapS = THREE.RepeatWrapping;
									texture.wrapT = THREE.RepeatWrapping;
									texture.flipY = false;
									texture.repeat = new THREE.Vector2(mat_repeat, mat_repeat);
									texture.encoding = THREE.sRGBEncoding;
									texture.needsUpdate = true;
									mat.map = texture;
									if(mat.normalMap){
										mat.normalMap = mat.normalMap;
										if(mat_normal == 'on'){
											mat.normalScale = new THREE.Vector2( 0.2, 0.2);
										} else {
											mat.normalScale = new THREE.Vector2( 0, 0 );
										}
									}
									mat.needsUpdate = true;
								});

I also have AWS cors config setup properly. Below is code of webconfig for it.

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET",
        "HEAD",
        "POST",
        "PUT",
        "DELETE"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": [
        "Etag"
    ],
    "MaxAgeSeconds": 3000
}
]

Below list works fine with above s3 settings.

1. GLTFLoader - loading gltf model from s3 bucket.
2. RGBELoader - loading HDR file for environment
3. Image showing in img tag - above texture jpeg image loads fine in img tag

Not working:

TextureLoader: not loading same image and showing cors issue.

I checked console request / response in network tab.

All Working list contains, request header

Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site

And contain Response Header

Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Etag
Access-Control-Max-Age: 3000

While In Texture loader, both request and response header is missing.

Chrome Version: 87.0.4280.141
Threejs Version: r124

When i see three.js file i think textureLoader function missing requestheader part like its there in GLTF loader. Below code is there in GLTFLoader but not in TextureLoader. I also tried adding it but not working though. Still putting it here.

loader.setRequestHeader( this.requestHeader );
loader.setWithCredentials( this.withCredentials );

Let me know if anyone have solved something like above and help me to solve issue.

Thanks in advance,
Rishi Mehta

[Mugen87]

@Rcreators_Websolutions

When i see three.js file i think textureLoader function missing requestheader part like its there in GLTF loader. Below code is there in GLTFLoader but not in TextureLoader. I also tried adding it but not working though.

This is unrelated to missing CORS header. I suggest you post ask this question at the AWS community. The S3 experts should be able to quickly provide help.

[Rcreators_Websolutions]

Thanks for quick response. I already put question there as well. I put it here cause, everything works fine with all loader except TextureLoader.

So its valid question for threejs as well. Also as i mentioned, only textureloader missing cross-header request and response. Everything else have working perfectly fine. So what can cause that ?

[Mugen87]

Sorry, this is unrelated to three.js. When inspecting the above URL in the dev tools, you can easily see that CORS headers are missing.

Check out the response headers of this URL: https://threejs.org/examples/textures/uv_grid_opengl.jpg

You need access-control-allow-origin: *.

[Rcreators_Websolutions]

Yes, Image is missing cross origin response header. But i am stunned cause all other resources loading fine just textureloader jpg file having issue.

I am loading gltf file, hdr file as well from AWS. Both works fine. Only issue with jpg file loading with textureloader.

Did you ever got hands on experience with something issue like this ?

Thanks for you replies though.

[Mugen87]

@Rcreators_Websolutions

Did you ever got hands on experience with something issue like this ?

No sorry. I have configure CORS on AWS once but it did work out of the box. I’ve used this documentation page:

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

[rrrr_rrrr]

CORS are fine.

new THREE.TextureLoader().load( ‘https://planova3d.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/10/26043628/heather-texture.jpg’,
texture => alert('W: ’ + texture.image.naturalWidth + '\nH: ’ + texture.image.naturalHeight), void(0), () => alert(‘Error Fetching The File’) );

Image gets downloaded.

I think the problem is with Chrome and LoadingManager.
Are you having any problems with FF?

[Mugen87]

It seems the CORS headers are now present. They were not when I tested the URL for the first time. I guess the issue is solved?

[Rcreators_Websolutions]

Thanks. I actually got AWS support to do CORS setting to force adding header access-control-allow-origin: * . for jpg, png files. So that did the trick and solved.

[Mason_Wong_BCL]

Hey @Rcreators_Websolutions

I’m having the same issue right now. Do you know exactly what they did on your CORS settings? Mine are the following:

[
{
“AllowedHeaders”: [
“"
],
“AllowedMethods”: [
“GET”
],
“AllowedOrigins”: [
"”
],
“ExposeHeaders”: [
“Content-Length”,
“Content-Type”,
“Access-Control-Allow-Origin”
],
“MaxAgeSeconds”: 3000
}
]

[Mason_Wong_BCL]

Alright actually I fixed it. For anyone who has this issues hope this helps!

In my case I was using Cloudfront. I needed to make sure Cloudfront was forwarding host headers to AWS S3 ( Origin and I also whitelisted Access Control Headers just in case).

Did this through whitelisting cache headers under behaviors in cloudfront

[lopu]

This fixed it for me too