Aframe: CORS error when doing inline URLs

[msj121]

When adding a url as such:

<a-sphere material="src:url(...)"></a-sphere>

I get:

No 'Access-Control-Allow-Origin' header is present on the requested resource

Is it possible that inline urls could be made to allow for crossorigin as a property of the material?

Reposted here (in case it is not a bug): https://stackoverflow.com/questions/40955781/cors-inline-material-for-aframe

[ngokevin]

Server side issue, the server did not allow CORS on the resource

[msj121]

I actually DO have CORS setup on my amazon server. It works correctly when the file is added as part of the with crossorigin attribute.

<img id="alibrary" src="https://s3.amazonaws.com/..." crossorigin="anonymous">

The problem is when I try to set the url on the object itself not in a-assets:

<a-image src="url(...)" position="0 0 -2" width="2" height="2"></a-image>

I get the following error:

XMLHttpRequest cannot load https://s3.amazonaws.com.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.

[msj121]

Personally I don't care too much as I use the as a workaround, but I have experienced CORS issues when using the url on the object directly.

[ngokevin]

OK, will need to double check the XHR has CORS set. I believe it should, we set it on the XHRLoader (soon to be named FileLoader).

[msj121]

If your request doesn't specify an Origin header, S3 won't include the CORS headers in the response.

[codechikbhoka]

is the issue solved ? I am facing the same problem

[bhibi]

still on problem

[codechikbhoka]

@bhibi I solved the problem I was facing. Can you elaborate your case ?

[bhibi]

thx @codechikbhoka i had some problem with adding image, .jpg file work flawless but i cant add my .png image with transparent background.

[KhaledGabr]

I guess I am having the same error, when I put the image link using imgix ( a service similar to cloudinary ) directly in the html with <img> tag everything works, however when I put it in the a-frame tag, it doesn't work
<a-scene> <a-sky src="https://example.imgix.net/example/example.jpg?lossless=True" rotation="0 0 0"></a-sky> </a-scene>
This is all what I have in the page, a simple 360 image served from an external source over HTTPS.

I contacted the customer support of imgix and that was their reply

We set an Access-Control-Allow-Origin header on every request that has an origin set. I've attempted to replicate this issue, but by specifying an origin the header is appearing correctly:

curl -H 'Origin: https://www.example.com' -I 'https://example.imgix.net/example/example.jpg?lossless=True'

HTTP/1.1 200 OK
Cache-Control: max-age=1800
Last-Modified: Thu, 23 Mar 2017 16:59:49 GMT
Server: imgix-fe
Fastly-Debug-Digest: e346dbbe2366c50ca5a8f3708699c7a048bffdfc5dc2c63592c41a9c99f7f6b3
Content-Length: 4088928
Accept-Ranges: bytes
Date: Thu, 23 Mar 2017 17:01:02 GMT
Age: 68
Connection: keep-alive
Content-Type: image/jpeg
X-Imgix-Request-ID: da63a9d66b2ab49a83e3fa2455b20426fd9911e8
Access-Control-Allow-Origin: *
X-Content-Type-Options: nosniff
X-Served-By: cache-lax8632-LAX, cache-sjc3123-SJC
X-Cache: MISS, HIT
X-Cache-Hits: 0, 1
Please ensure that the origin is being set on every request to ensure that the header is sent from our end.

Please help me fix this error.
Thanks in advance.

[codechikbhoka]

what happens is, when you request a resource from a third party, you have to mention the origin tag in the request. Then only that third party will send you response with Access-Control-Allow-Origin header. So to do this in aframe, you should add crossorigin=anonymous in your img item in your a-asset.

This should work:

https://gist.github.com/codechikbhoka/3c0135b88ec1fd876377d091a19f92df

[KhaledGabr]

@codechikbhoka Thank you so much Vivek, That solved it for me!

[ngokevin]

Using an <img> in <a-assets> without crossorigin should work since A-Frame will auto-inject that.

I wonder about the inline URL piece though

[ngokevin]

I've did an extra set of cross origin on the TextureLoader for inline URLs, maybe that will help even though we overrode the prototype already https://github.com/aframevr/aframe/pull/2544

[ngokevin]

Check if that works. https://rawgit.com/aframevr/aframe/ee12d49/dist/aframe-master.min.js

[alwell-kevin]

@ngokevin Using the asset management system did not fix the issue.

<a-assets>
        <img id="asset-scene-url" src="{{location.scene_img_url}}">
<a-assets>

  <a-sky ng-click="print()" src="#asset-scene-url"></a-sky>

Where location.scene_img_ur is an s3 asset with CORS enabled. Issue still remains.

FIX can be found above. Add crossorigin="anonymous" to the img tag within a-assets

[EnoahNetzach]

@ngokevin the problem with Chrome (and Safari) is probably within this piece of code.

It "checks" that the to-be-loaded src is indeed an image, without setting the crossOrigin value. The browser then probably caches the received headers and since it was NOT requested with the Origin header, the Access-Control-Allow-Origin header is not present in the cached response.

Then it proceeds to load the image (using three.js' ImageLoader), but since this time the crossOrigin is set ("anonymous" by default) and the header is not set in the cache, the browser cancels it because of CORS.

[einfochips1]

@codechikbhoka not able to access your solution. could you please resend it?
https://gist.github.com/codechikbhoka/3c0135b88ec1fd876377d091a19f92df url is not accessible.

Thanks in advance

[joselevelsup]

I am still getting trouble with this. I can not use both the inline and crossorigin method from an S3 bucket. I have used Aframe React, Vanilla Aframe (mostly a-image), the asset system using <img src=whatever crossorigin="anonymous" />, and I tried to apply a texture to a plane to try and render out my image but I am not succeeding.

[Besnuggs]

Is there a way to bypass this with an inline URL on an a-image tag and not use the asset-management-system? I'm experiencing this exact issue on a React based application using the aframe-react-assets plugin, and I'd like to avoid any needless data flow to an image that technically isn't Static, but rather a user selected image from my database that needs to be requested.

Thank you in advance.

EDIT: The images I'm requesting are from AWS, and I've set the CORS Rules to the following:

?xml version="1.0" encoding="UTF-8"?
CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"
CORSRule
AllowedOrigin> AllowedMethod>GET AllowedMethod>POST AllowedMethod>PUT AllowedHeader> /CORSRule
/CORSConfiguration

[nealoke]

I also have the issue where the image loads fine in a regular img tag but when aframe tries to load it, it gives me the CORS error... Same as @joselevelsup and @Besnuggs

It is from s3 bucket as well...

@Besnuggs did you find a solution?

[Besnuggs]

Hey @nealoke

I'm afraid not. I did solve my issue, but I ultimately connected Redux to a separate file containing the a-assets and the img tags I wanted to load, and simply passed in the srcs as the component mounted. And, although this has helped with rendering my images from AWS, CORS still interferes with the loading of some images that are loading elsewhere (not from AWS) - but would otherwise load just fine as inline URLs in the a-image tag.

[maxleonard]

Made it work.. Make sure you use an uppercase 'A' in your imageElement.setAttribute('crossorigin', 'Anonymous');
(not imageElement.setAttribute('crossorigin', 'anonymous');)

Also, I found that if there is a redirect to an AWS bucket in the mix then it wouldn't work. I had to pre-fetch the resource, get the redirect URL and add that as the img src rather than letting aframe deal with the 302 itself.