当我从 a-sky 标签内的另一台服务器加载图像时出现 CORS 错误
CORS error when I load image from another server inside a-sky tag
我试图使用我自己托管的网络服务器中的纹理，但将其放入 asset-item 标记中时出现以下错误。
> 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本身无关，这是服务器上的一个小错误。 headers 是在文件服务器初始化后指定的。将规范放在初始化阶段就成功了……当然……:-D
什么是 CORS？
这不是 A 帧或 Three.js 或 WebVR 的问题。 CORS (Cross-origin resource s haring) 发生在 JavaScript （在你的情况下是这个脚本 https://aframe.io/releases/0.5.0/aframe.min.js ) makes a cross-domain XHR (XMLHttpRequest) call (in your situation is that to http://192.168.x.x:3000/cat.jpg ）.
我在 Wikipedia 上找到了一张图片，它提供了有关 CORS 工作流程的更多信息。
你的请求是GET请求，有自定义的HTTP头，没有添加Acces-Control-*个头，导致错误。
More information about CORS 我在 Mozilla 开发者网络上找到了。
来自 A 帧的文档
Why does my asset (e.g., image, video, model) not load?
First, if you are doing local development, make sure you are using a local server so that asset requests work properly.
If you are loading the asset from a different domain (and that you do), make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could either find a host to serve the asset with CORS headers, or place the asset on the same domain (directory) as your application.
为什么会这样？1
看起来必须添加脚本 (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>，图像 URL 将绑定到 a-skys src 属性。再次从 A-frames 服务器上的脚本加载图像并进行跨域 XHR 调用。
1 我不是 100% 确定，但很有可能它是正确的。如果有人认为这不正确，请说出来。如果正确也请说出来
解决方案
- 将文件放在本地主机 Web 服务器上。
- 请求图片时添加响应头
Access-Control-Allow-Origin。我认为，该值必须是 http://aframe.io.
经过多次尝试和错误，我终于找到了一种方法，可以将远程服务器的图像合并到我的本地服务器，而不会遇到 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 代理，将执行请求所需的所有 headers 添加到远程服务器，并在 src 字段中收集 objects。
请注意src请求为：https://cors-anywhere.herokuapp.com/<url_you_are_looking_for>
我试图使用我自己托管的网络服务器中的纹理，但将其放入 asset-item 标记中时出现以下错误。
> 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本身无关，这是服务器上的一个小错误。 headers 是在文件服务器初始化后指定的。将规范放在初始化阶段就成功了……当然……:-D
什么是 CORS？
这不是 A 帧或 Three.js 或 WebVR 的问题。 CORS (Cross-origin resource s haring) 发生在 JavaScript （在你的情况下是这个脚本 https://aframe.io/releases/0.5.0/aframe.min.js ) makes a cross-domain XHR (XMLHttpRequest) call (in your situation is that to http://192.168.x.x:3000/cat.jpg ）.
我在 Wikipedia 上找到了一张图片，它提供了有关 CORS 工作流程的更多信息。
你的请求是GET请求，有自定义的HTTP头，没有添加Acces-Control-*个头，导致错误。
More information about CORS 我在 Mozilla 开发者网络上找到了。
来自 A 帧的文档
Why does my asset (e.g., image, video, model) not load?
First, if you are doing local development, make sure you are using a local server so that asset requests work properly.
If you are loading the asset from a different domain (and that you do), make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could either find a host to serve the asset with CORS headers, or place the asset on the same domain (directory) as your application.
为什么会这样？1
看起来必须添加脚本 (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>，图像 URL 将绑定到 a-skys src 属性。再次从 A-frames 服务器上的脚本加载图像并进行跨域 XHR 调用。
1 我不是 100% 确定，但很有可能它是正确的。如果有人认为这不正确，请说出来。如果正确也请说出来
解决方案
- 将文件放在本地主机 Web 服务器上。
- 请求图片时添加响应头
Access-Control-Allow-Origin。我认为，该值必须是http://aframe.io.
经过多次尝试和错误，我终于找到了一种方法，可以将远程服务器的图像合并到我的本地服务器，而不会遇到 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 代理，将执行请求所需的所有 headers 添加到远程服务器，并在 src 字段中收集 objects。
请注意src请求为：https://cors-anywhere.herokuapp.com/<url_you_are_looking_for>