aframe: CORS error when doing inline URLs

I actually DO have CORS setup on my amazon server. It works correctly when the file is added as part of the <a-assets> 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.

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.

@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

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

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.

@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

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

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