问题：

Question

尝试从服务器加载Collada文件时，出现Cross Origin错误，因此无法访问我的文件

链接：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);

如何摆脱交叉原点图块？

Answer 1

不要尝试将collada文件作为脚本追加，请尝试以下操作：

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);
});

Answer 2

问题：

许多Apache服务器（如您的服务器）默认已禁用与其他服务器的资源共享。对于您而言，https://hydle.000webhostapp.com不允许与https://codepen.io共享.dae文件，这就是为什么您会收到此错误的原因。

解决方案1：

如果您将代码和.dae文件托管在同一服务器上，则不会遇到任何CORS问题，因为它们的起源相同。

解决方案2：

您需要将PHP脚本上载到服务器，以允许将资源共享到特定域。我不会为您编写整个代码，但是它会像这样：

script.php：

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

然后将script.php上传到服务器，您将能够通过JavaScript从codepen.io加载该资源：

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

以这种方式访问script.php将返回file.dae的内容。由于安全性问题，我不建议使用解决方案2，但这正是您所要的。有关PHP的readfile的更多信息，您可以阅读its documentation。

三个JS跨源Collada文件

2 个答案:

问题：

解决方案1：

解决方案2：