三个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

试试这个：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的问题。所做的只是告诉浏览器你想向服务器请求使用图像的许可。实际授予该权限仍然取决于服务器。默认情况下，大多数服务器不授予权限，必须配置为添加该权限。

Answer 3

我使用与 google chrome 不同的浏览器修复了它。

我不能使用本地服务器的原因是因为这是一项学校作业。打算给它评分的人不会运行本地服务器来让它工作。他们只是打开它，看到它不起作用并减分。

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

Three js texture loading. Access to image from origin 'null' has been blocked by CORS policy

javascript

textures

three.js