THREE JS Cross origin Collada file

Question

When trying to load Collada file from my server I get the Cross Origin error so my file is inaccessible

Link: https://codepen.io/RedKizaru/pen/MBXYbV

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://hydle.000webhostapp.com/host/obj/stand.dae";
script.integrity = "sha384-tSi+YsgNwyohDGfW/VhY51IK3RKAPYDcj1sNXJ16oRAyDP++K0NCzSCUW78EMFmf";
script.crossOrigin = "anonymous";
document.getElementsByTagName("head")[0].appendChild(script);

How can I get rid of the cross origin block ??

This is not a ThreeJS question. This is an issue with CORS. You need to set up your server to allow sharing assets with `https://codepen.io` if that's where you want your assets to be available. How do you set up your server to allow CORS? Well, that depends on what type of server you're running. Is it running php, Node, other? You should also read this https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present/27280939#27280939 — M -, Aug 03 '18 at 18:52
@Marquizzo Could not find a clear solution to use with Javascript. For the type of server I just put the files there for being used on other websites — Devastarius, Aug 07 '18 at 15:31
That's because your server does not allow resource sharing with other websites. You have to modify your server settings to allow resource sharing. It probably won't be a JavaScript solution. — M -, Aug 07 '18 at 17:02
@Marquizzo I guess it's like you said, but honestly I don't Know how to do so .. any ideas how can that be done ? — Devastarius, Aug 08 '18 at 16:25

score 0 · Answer 1 · answered Aug 06 '18 at 21:07

0

Instead of trying to append your collada file as a script, try this:

var url = "https://hydle.000webhostapp.com/host/obj/stand.dae";
var loader = new THREE.ColladaLoader();
loader.setCrossOrigin("anonymous");
loader.load(url, function (collada) {
    scene.add(collada.scene);
});

answered Aug 06 '18 at 21:07

Shawn S.

9
5

Thanks for your reply, but that didn't do any change – Devastarius Aug 07 '18 at 15:29
@Devastarius are you running a webserver? Three.js needs a webserver to run. – Shawn S. Aug 08 '18 at 17:30

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Problem:

Many Apache servers (like yours) have disabled resource-sharing with other servers by default. In your case, https://hydle.000webhostapp.com is not allowed to share the .dae file with https://codepen.io, which is why you're getting this error.

Solution 1:

If you host your code and your .dae file on the same server, you won't run into any CORS issues, since they both have the same origin.

Solution 2:

You'll need to upload a PHP script to your server that allows resource-sharing to specific domains. I won't write the whole code for you, but it goes something like this:

script.php:

<?php
    header("Access-Control-Allow-Origin: https://codepen.io");
    echo readfile("/path/to/file.dae");
?>

then you upload script.php to your server, and you'll be able to load that resource from codepen.io via JavaScript:

script.src = "https://hydle.000webhostapp.com/host/obj/script.php";

Accessing script.php this way will return the contents of file.dae. I don't recommend solution 2 because of security issues, but it's what you asked for. For more info on PHP's readfile, you can read its documentation.

THREE JS Cross origin Collada file

2 Answers2

Problem:

Solution 1:

Solution 2:

Linked