【问题标题】：THREE JS Cross origin Collada file三个 JS 跨源 Collada 文件
【发布时间】：2019-01-11 10:32:06
【问题描述】：

当尝试从我的服务器加载 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);

我怎样才能摆脱跨源块？？

【问题讨论】：

这不是 ThreeJS 的问题。这是 CORS 的一个问题。您需要设置您的服务器以允许与https://codepen.io 共享资产，如果您希望您的资产可用。您如何设置服务器以允许 CORS？好吧，这取决于您正在运行的服务器类型。它是在运行 php、Node 还是其他？您还应该阅读此stackoverflow.com/questions/20035101/…
@Marquizzo 找不到与 Javascript 一起使用的明确解决方案。对于服务器类型，我只是将文件放在那里以便在其他网站上使用
那是因为您的服务器不允许与其他网站共享资源。您必须修改服务器设置以允许资源共享。它可能不是 JavaScript 解决方案。
@Marquizzo 我想就像你说的那样，但老实说我不知道该怎么做......有什么想法可以做到吗？

标签： cors cross-domain

【解决方案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);
});

【讨论】：

感谢您的回复，但没有任何改变
@Devastarius 你在运行网络服务器吗？ Three.js 需要一个网络服务器才能运行。

【解决方案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。

【讨论】：