CORS error when I load image from another server inside a-sky tag

问题

I am trying to to use a texture from my own hosted webserver but putting it into the asset-item tag I get the following error.

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

The picture is accessible, since I can see it in the webinspector. It works perfectly in a simple image tag. Does anyone know what to do here? Thanks!

Update: My code you could find below:

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

Solution:

I figured out the main problem: It had nothing to do with A-Frame itself, it was a minor mistake on the server. The headers were specified after the fileserver was initialized. Putting the specification in the initialization phase did the trick... of course... :-D

回答1:

What's CORS?

This is not A-frame or Three.js or WebVR that is an issue. CORS (Cross-origin resource sharing) happens when the JavaScript (in your situation is that this script 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 ).

On Wikipedia I've found an image that gives more information about the workflow of CORS.

Your request is a GET-request, there are custom HTTP headers and didn't add Acces-Control-* headers, result an error. More information about CORS I've found on the Mozilla Developer Network.

Documentation from A-frame

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.

Why is this happen?¹

It looks like the script (https://aframe.io/releases/0.5.0/aframe.min.js ) that must be added, loads the images and that's why <a-sky src="http://192.168.0.253:457/cat.jpg" /> is not working at all. Because the image is loaded from the script that is hosted on A-frame.

If you use <a-assets><img src="http://192.168.0.253:457/cat.jpg" /></a-assets>, the image URL is bound to the a-skys src-attribute. And again the image is loaded from the script on A-frames server and makes a cross-domain XHR call.

^{¹ 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.}

Solutions

Place the file on your local host web server.
Add the response header Access-Control-Allow-Origin when the image is requested. I think, the value must be http://aframe.io.

回答2:

After many trial and error, I finally found a way to incorporate images from remote server to my local server without facing CORS errors. The solution is using a CORS proxy instead of doing direct request.

Despite the following code is not the most elegant solution, it works for me.

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

Using CORS Proxy, adds all the headers needed to perform the request to the remote server and gather the objects in the src field.

Please note that the src request is: https://cors-anywhere.herokuapp.com/<url_you_are_looking_for>

来源：https://stackoverflow.com/questions/44001934/cors-error-when-i-load-image-from-another-server-inside-a-sky-tag

标签

three.js

cors

aframe

webvr