a 帧中的 CORS 阻塞图像答案

【问题标题】：CORS blocking image in a-framesa 帧中的 CORS 阻塞图像
【发布时间】：2018-02-04 00:23:56
【问题描述】：

为什么我可以在常规 HTML 中从 Internet 上加载随机图像，但在 A-Frames 中却遇到这个烦人的 CORS 废话？

在 CORS 错误中运行的帧代码

        <a-assets>
            <img id="homeThumbnail" src="https://i.ytimg.com/vi/GJWuVwZO98s/maxresdefault.jpg" crossorigin="anonymous">
        </a-assets>

正常显示图像的常规 HTML 代码

<img src="https://i.ytimg.com/vi/GJWuVwZO98s/maxresdefault.jpg">

【问题讨论】：

尝试改用<a-assets> <img id="homeThumbnail" src="https://cors-anywhere.herokuapp.com/https://i.ytimg.com/vi/GJWuVwZO98s/maxresdefault.jpg" crossorigin="anonymous"> </a-assets>，如果这样可以解决问题，并且您想知道原因，您可以在stackoverflow.com/questions/43871637/…的答案中找到解释（在答案的中间部分, 在代码 sn-ps 之后）。
@sideshowbarker 它仍然抛出header requires 错误，并且似乎不起作用jsfiddle.net/qftwzegd/2

标签： html cors aframe

【解决方案1】：

您应该下载此图像，并从您的服务器上使用它。否则，您可以将其上传到 imgur.com 或 glitch.me，这两者都不会导致 CORS 问题。

据我所知，CORS 问题更多地取决于服务器，然后是 a-frame 或 three.js。

我尝试使用原生 Three.js 纹理加载器，但图像不想加载。这是因为它无法从服务器接收到足够的信息，因此控制台会抛出关于没有响应的错误：

components:texture:error '$s' could not be fetched (Error code: undefined; Response: undefined)

imgur.com，或者大多数维基百科图片不会导致他们的图片出现问题。

在 fiddle 上查看错误和有效的 imgur 链接。

【讨论】：