DOMException：无法在“WebGLRenderingContext”上执行“texImage2D”：可能无法加载“https://xxxx.xxxx”处的跨域图像答案

【问题标题】：DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at "https://xxxx.xxxx" may not be loadedDOMException：无法在“WebGLRenderingContext”上执行“texImage2D”：可能无法加载“https://xxxx.xxxx”处的跨域图像
【发布时间】：2017-12-09 15:51:17
【问题描述】：

Chrome 显示：

DOMException：无法在“WebGLRenderingContext”上执行“texImage2D”：“https://xxxx.xxxx/models/skin.png”处的跨域图像可能无法加载。

项目是这样工作的：

--index.html
--live2d.js
--models（文件夹）
---|模型.json
---|皮肤.png

这个model.json定义了模型中需要的图片，live2d.js从model.json获取数据并使模型动画化。

如果我将这些放在我的主域中，一切正常，但是当我尝试从我的 CDN 域加载这些（意味着仅从主域加载 index.html，但从 CDN 加载其他文件）时，我得到了：

enter image description here

但是正如你所看到的，虽然我相信我已经很好地设置了CDN服务器的跨域，并且live2d.js和model.json从CDN域正常加载，只是图片出错了。

我已经搜索了一段时间，例如 this，但我的问题完全不同，因为我的所有文件都是从服务器加载的，包括 index.html。

【问题讨论】：

问题在于正在加载的图像。它显然不允许跨域图像。你在你的 CDN 上为 CORS 或类似的东西做了什么样的配置？
developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
我用的是商业CDN，它的面板不是英文的所以不需要在这里粘贴截图...它有一个白名单，你必须添加允许加载资源的域CDN。而且我绝对添加了我的域。那么CDN是否还有可能出现问题？
感谢 Mozilla 的链接，我正在尝试...

标签： javascript json

【解决方案1】：

我也遇到了同样的问题，我通过设置用于加载和解析 obj 文件的加载器的跨域来修复它。

这样，

loader.setCrossOrigin ( value )

假设你使用的是ObjectLoader，这样设置crossorigin，

var loader = new THREE.ObjectLoader();
loader.setCrossOrigin ( 'anonymous' ):

【讨论】：

js // load textures var loadedImage = new Image(); loadedImage.src = path; 我试过这个：js var loadedImage = new Image(); loadedImage.setCrossOrigin ( 'anonymous' ); loadedImage.src = path;
嗯，那你可能需要在服务器端进行一些配置。与跨域有关的东西。
这样的，我用的是商业CDN，它的面板不是英文的所以不需要在这里粘贴截图...它有一个白名单，你必须添加允许的域从 CDN 加载资源。而且我绝对添加了我的域。那么CDN是否还有可能出现问题？
但我认为跨域请求是不同的，它应该在服务器中被允许。您可以使用 url 将图像下载到本地计算机吗？
@MashiroYuuki loadedImage.setCrossOrigin() 错误。我的意思是，你必须为 loader 设置 crossorigin。