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

【问题标题】：Three js texture loading. Access to image from origin 'null' has been blocked by CORS policy三个js纹理加载。 CORS 策略已阻止从源“null”访问图像
【发布时间】：2018-02-24 01:07:20
【问题描述】：

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

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

【问题讨论】：

什么是<file-path>？这是来自同一个域吗？
是文件的路径，我在这里省略了它，但我检查了错误消息中的链接，文件肯定在那里
路径是什么意思？你的 path 以什么开头？
@SunnySoni 这是一个学校作业，我们必须使用 three.js 在 webgl 中制作一个场景。要求之一是我们使用纹理映射，并且我们需要使用本地图像，因为我们必须在某个时候提交它
为什么不使用相对 URL，在适当的上下文中不使用 file:///D:/？

标签： javascript three.js textures

【解决方案1】：

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

如果文件不是本地文件，则服务器本身需要授予权限。某些服务器（如 github pages）默认执行此操作。 imgur 和 flickr 也是如此。

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

跨域图像不仅仅是设置 crossOrigin 的问题。所做的只是告诉浏览器你想向服务器请求使用图像的权限。仍然由服务器实际授予该权限。大多数服务器默认不授予权限，必须配置为添加该权限。

【讨论】：

【解决方案2】：

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

【讨论】：

这个我试过了，不行，控制台报错是一样的
那么您的服务器似乎阻止了来自不同域的任何请求，您应该允许您的服务器上的跨源，例如 php enable-cors.org/server_php.html

【解决方案3】：

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

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

【讨论】：