Question

我正在尝试加载纹理，但无论我做什么，我都会收到此错误：

Access to Image at '<file-path>/IMG/1.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这是我用来加载图片的代码：

var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
var url = "IMG/1.jpg";
var materials = [
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
];

Answer 1

试试这个：loader.setCrossOrigin('anonymous');

Answer 2

如果文件是本地文件，则需要运行本地服务器。 It's simple in will take just a minute or so

如果文件不是本地文件，则服务器本身需要授予权限。像github页面这样的服务器默认执行此操作。 imgur和flickr也是如此。

否则，如果它是您控制的服务器，则需要将其配置为授予权限。每个服务器（apache，nginx，caddy，iis等）的配置都不同，您需要根据您使用的服务器进行搜索。如果它不是您控制的服务器，那么您需要询问控制它的人将其配置为授予CORS权限

交叉原始图像不仅仅是设置crossOrigin的问题。所有这一切都是告诉浏览器您要求服务器获得使用该映像的权限。服务器仍然需要实际授予该权限。默认情况下，大多数服务器不授予权限，必须配置为添加该权限。

三个js纹理加载。 CORS策略阻止了对来自“null”的映像的访问

2 个答案: