三个 js 纹理加载。CORS 策略已阻止从源'null'访问图像

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

如果文件是本地，则需要运行本地服务器。很简单，只需一分钟左右。

如果文件不是本地，则服务器本身需要授予权限。默认情况下，一些服务器(例如GitHub页面(执行此操作。Imgur和Flickr也是如此。

否则，如果是您控制的服务器，则需要配置它以授予许可。每个服务器(Apache，nginx，caddy，iis等(的配置方式都不同，您需要搜索基于您使用的服务器的方式。如果您不是您控制的服务器，那么您需要询问确实控制它的人以配置它以提供CORS权限

交叉起源图像不仅仅是设置横向素的问题。所做的只是告诉您要询问服务器的浏览器以获取使用图像的权限。实际上，服务器实际授予该许可。默认情况下，大多数服务器都不授予许可，必须配置以添加该权限。

Answer 2

尝试一下： loader.setCrossOrigin('anonymous');

Answer 3

我通过使用与Google Chrome不同的浏览器修复了它。

我无法使用本地服务器的原因是因为这是学校作业。要对其进行评分的人不会运行本地服务器以使其正常工作。他们只是打开它，看到它不起作用并减去积分。