Mixed Content Error when using threejs STLLoader to request a file from server

Question

I am trying to load a STL file from my server on Render.com running a Flask app with Gunicorn using the threejs STLLoader but am getting the following error in browser only on some devices.

Mixed Content: The page at 'https://www.vasedjinn.com/' was loaded over HTTPS, but requested an insecure resource 'http://www.vasedjinn.com/static/stl/surf.stl'. This request has been blocked; the content must be served over HTTPS.

The function call is shown below:

const loader = new STLLoader();
    console.log(stl_path);
    loader.load( stl_path, function ( geometry ) {

        const material = new THREE.MeshPhongMaterial( { color: vaseColor, specular: 0x494949, shininess: 100 } );
        vaseMesh = new THREE.Mesh( geometry, material );

        vaseMesh.position.set( 0, 0, 0 );
        vaseMesh.rotation.set(0,0,0);
        vaseMesh.scale.set( 0.02, 0.02, 0.02 );
        vaseMesh.rotation.x = -Math.PI / 2;

        vaseMesh.castShadow = true;
        vaseMesh.receiveShadow = true;

        scene.add( vaseMesh );

    } );

Previously I was just passing the relative path //static/stl/surf.stl to this function, but even if I pass the full https:// path I still get the error. Constructing the path as below:

var stl_path = {{ url_for("static",filename= '/stl/surf.stl')|tojson }};
  stl_path = window.location.href + stl_path;

When I log the path it is an https path (https://www.vasedjinn.com//static//stl/surf.stl to be exact), but it must be transformed to a http request in the STLLoader function. I have looked through the source, but can't makes sense of where it would change the path to be honest.

Any help greatly appreciated! I can probably shift to a different method from loading the file from the server into javascript, but not sure how from there I would go about turning the STL into a three.js object.

Site is live if you want to take a look yourself

score 1 · Accepted Answer · answered Jun 28 '23 at 02:11

The problem is the double-slashes in your URL.

For the request https://www.vasedjinn.com//static//stl/surf.stl, your server is responding with a 308 Permanent Redirect...

< HTTP/2 308
< location: http://www.vasedjinn.com/static/stl/surf.stl

Note the location header is using an http:// URL. You should probably fix that up so legitimate redirects work correctly.

Since your URL appears to be available relatively, you should simply use a path-only value without any double-slashes

const stl_path = "/static/stl/surf.stl";

There is no need to prefix this with window.location.href.

Wow thanks a ton truly appreciate this. I was convinced it was an issue with the client side request, didn't notice the redirect. Headache alleviated — Jules Gabriel Pare, Jun 28 '23 at 03:08

Mixed Content Error when using threejs STLLoader to request a file from server

1 Answers1