Images on different subdomain

Questions
1

Hello there,

I have been using Three.js for some time to display my panoramic pictures. I have recently moved all my images to a sub domain and since I did that, three.js is not loading images anymore and I get the following error message in my console:

DOMException: "The operation is insecure." three.js:121:396

I have one domain for browsable pages and a subdomain for images. CORS are set to allow access to everything under the same domaine *.mydomain.com and I can display images from subdomain.mydomain.com on pages like www.mydomain.com

I can access all my pictures with img src but as soon as I load one with Three.js, it doesn’t work.

Do you know how I could solve this?

Thanks

2

Can you please demonstrate this issue by sharing a live example? Maybe a test page of your website?

3

Sure, you can find one here : https://wp.laurentwillen.be/circuits/circuit-italie/catane/

the wp will be replaced by www as soon as I have finished the site. Images are hosted on the same server but different subdomain (images.laurentwillen.be)

Thanks

1 Like
4

Okay, I’ve inspected the HTTP response header of the following image.

Unfortunately, I see no Access-Control headers:

image
image980×850 82.5 KB

5

The following stackoverflow thread actually describes your issue and the solution:

6

Thanks!

In my htaccess I have this:
SetEnvIf Origin ^(https?://(?:.+.)?laurentwillen.be(?::\d{1,5})?)$ CORS_ALLOW_ORIGIN=$1
Header append Access-Control-Allow-Origin %{CORS_ALLOW_ORIGIN}e env=CORS_ALLOW_ORIGIN
Header merge Vary “Origin”

I had also found that post on Stackoverflow and it didn’t help me because I’m not creating an image. Here is the initialization I’m using:

container = document.getElementById( 'background-section' );
document.getElementById( 'background-section') .style.display='block';
document.getElementById( 'pano-loading-section') .style.display='block';
document.getElementById( 'close') .style.display='block';
		
THREE.crossOrigin = 'anonymous';
THREE.ImageUtils.crossOrigin = 'anonymous';
		
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );

var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( full_image )
		} );

Should I apply the cross origin somewhere else?

Thanks

7

These are deprecated and won’t have any effect.

Sorry, I’m no web admin so I can’t tell you whether your config is right or not. The only thing I can tell is that the CORS headers are definitely missing. If they are present, you can load the image without adding special code (anonymous is already the loader’s default).

I suggest you post at stackoverflow a pure web server related question to get this fixed.

8

All right, thanks for your help! I’ll follow your suggestion and look for help on my htaccess config.