Question

我正在尝试使用来自我自己的托管网络服务器的纹理，但将其放入资产项目标记我收到以下错误。

> 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.

图片可以访问，因为我可以在webinspector中看到它。它在一个简单的图像标签中完美运行。有谁知道该怎么办？谢谢！

更新：您可以在下面找到我的代码：

<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

Answer 1

什么是CORS？

这不是A-frame或Three.js或WebVR，这是一个问题。当JavaScript （在你的中）发生CORS（ C ross- o rigin r esource s haring）情况是，此脚本https://aframe.io/releases/0.5.0/aframe.min.js）会进行跨域XHR (XMLHttpRequest)调用（在您的情况下是http://192.168.x.x:3000/cat.jpg）。

在Wikipedia我找到了一张图片，提供了有关CORS工作流程的更多信息。

您的请求是GET请求，有自定义HTTP标头但未添加Acces-Control-*标头，导致错误。 More information about CORS我在Mozilla开发者网络上找到了。

A-frame
中的文档

Why does my asset (e.g., image, video, model) not load?

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

如果要从其他域（以及您这样做）加载资产，请确保该资产是使用跨源资源共享（CORS）标头提供的。您可以找到使用CORS标头为资产提供服务的主机，也可以将资产放在与您的应用程序相同的域（目录）上。

为什么会发生这种情况？¹

看起来必须添加脚本（https://aframe.io/releases/0.5.0/aframe.min.js），加载图片，这就是<a-sky src="http://192.168.0.253:457/cat.jpg" />根本不起作用的原因。因为图像是从A帧上托管的脚本加载的。

如果您使用<a-assets><img src="http://192.168.0.253:457/cat.jpg" /></a-assets>，则图片网址会绑定到a-sky s src - 属性。同样，图像从A帧服务器上的脚本加载，并进行跨域XHR调用。

^{¹我不是百分百肯定，但它很可能是正确的。如果有人认为这不正确，请说出来。如果是正确的，请说出来。}

解决方案

将文件放在本地主机Web服务器上。

请求图片时添加回复标题Access-Control-Allow-Origin。我认为，该值必须为http://aframe.io。

Answer 2

经过反复试验，我终于找到了一种将映像从远程服务器合并到本地服务器的方法，而不会遇到CORS错误。解决方案是使用CORS代理而不是直接请求。

尽管以下代码不是最优雅的解决方案，但它对我有用。

<!DOCTYPE html>
<html>
<head>
    <title>

    </title>
        <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>

    <a-scene>
        <a-assets>
            <img id="frodo" crossorigin="anonymous" src="https://cors-anywhere.herokuapp.com/http://i.dailymail.co.uk/i/pix/2011/01/07/article-1345149-0CAE5C22000005DC-607_468x502.jpg">
        </a-assets>
        <!-- Using the asset management system. -->
        <a-image  src="#frodo"></a-image>

    </a-scene>

</body>
</html>

使用CORS代理，将执行请求所需的所有标头添加到远程服务器，并在src字段中收集对象。

请注意，src请求为：https://cors-anywhere.herokuapp.com/<url_you_are_looking_for>

从a-sky标记内的其他服务器加载图像时出现CORS错误

2 个答案:

什么是CORS？

A-frame

为什么会发生这种情况？¹

解决方案

从a-sky标记内的其他服务器加载图像时出现CORS错误

2 个答案:

什么是CORS？

A-frame

为什么会发生这种情况？ 1

解决方案

为什么会发生这种情况？¹