当我从 a-sky 标签内的另一台服务器加载图像时出现 CORS 错误

我试图使用我自己托管的网络服务器中的纹理，但将其放入资产项目标签中时出现以下错误。

> Access to Image at 'http://192.168.137.1:3000/cat2.jpg' from origin
> 'http://localhost' has been blocked by CORS policy: No
> 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost' is therefore not allowed access.

该图片是可访问的，因为我可以在网络检查器中看到它。 它在简单的图像标签中完美运行。有人知道在这里做什么吗？ 谢谢！

Update:您可以在下面找到我的代码：

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-scene>
  <a-assets>
    <img id="cat" src="http://192.168.x.x:3000/cat.jpg"/>
  </a-assets>

  <a-sky src="#cat"/> <!-- this code works not (CORS) -->
  <a-sky src="http://192.168.x.x:3000/cat.jpg" /> <!-- this code works not (CORS) -->
</a-scene>

<img id="cat" src="http://192.168.x.x:3000/cat.jpg"/> <!-- this code works -->

解决方案：

我找出了主要问题：它与A-Frame本身无关，这是服务器上的一个小错误。标头是在文件服务器初始化后指定的。将规范放在初始化阶段就成功了……当然……:-D

什么是 CORS？

这不是 A-frame、Three.js 或 WebVR 的问题。跨域资源共享 (Cross-origin resource sharing）发生在 JavaScript 中（在你的情况下这个脚本https://aframe.io/releases/0.5.0/aframe.min.js )使得跨域XHR (XMLHttpRequest) call （在你的情况下是http://192.168.x.x:3000/cat.jpg ).

On 维基百科我找到了一张图片，其中提供了有关 CORS 工作流程的更多信息。

您的请求是 GET 请求，有自定义 HTTP 标头并且未添加Acces-Control-*标题，导致错误。有关 CORS 的更多信息我在 Mozilla 开发者网络上找到了。

A 型框架的文档

为什么我的资源（例如图像、视频、模型）无法加载？

首先，如果您正在进行本地开发，请确保您使用的是本地服务器，以便资产请求正常工作。

如果您从不同的域加载资源（你也这么做了），确保资产使用跨域资源共享 (CORS) 标头提供服务。您可以找到一个主机来为具有 CORS 标头的资产提供服务，或者将资产放置在与您的应用程序相同的域（目录）上。

Why is this happen?¹

看起来像剧本(https://aframe.io/releases/0.5.0/aframe.min.js )必须添加，加载图像，这就是为什么<a-sky src="http://192.168.0.253:457/cat.jpg" />根本不工作。因为图像是从 A-frame 上托管的脚本加载的。

如果你使用<a-assets><img src="http://192.168.0.253:457/cat.jpg" /></a-assets>，图像 URL 绑定到a-skys src-属性。再次从 A-frames 服务器上的脚本加载图像并进行跨域 XHR 调用。

^{1 I'm not 100% sure, but there is a big chance that it's correct. If anyone think that this is not correct, please say it. If it is correct, please say it also.}

解决方案

1. 将文件放置在本地主机 Web 服务器上。
2. 添加响应头Access-Control-Allow-Origin当请求图像时。我认为，价值必须是http://aframe.io.