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.
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
.