1

Im building an app with Aframe that requires fetching images saved onto AWS.

I was getting consistent cors rejection, and after resolving that, my images are passing cors but SOMETIMES they are not, I then utilized asset caching to render the images and the error has changed from mentioning cors to Tainted canvases

enter image description here

Im thinking that cors is effected by the clients internet speed or location?

Im also using aframe react and im wondering if react-rerenders on startup are causing the issue.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
8195mike
  • 90
  • 8
  • You need to request CORS permission **AND** the server needs to grant that permission. See: https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html, https://stackoverflow.com/questions/35020259/why-cors-on-images-with-html-canvas, https://stackoverflow.com/questions/24087757/three-js-and-loading-a-cross-domain-image, https://stackoverflow.com/questions/30945945/tainted-canvases-may-not-be-loaded-cross-domain-issue-with-webgl-textures – gman Nov 12 '18 at 17:36
  • For me adding crossorigin="anonymous" solved it. If your images are on s3, I think it already has a valid cross-domain CORS policy, so all it took was the attribute in the tag. – OG Sean Mar 28 '22 at 21:30

1 Answers1

2

Make sure to have <img crossorigin="anonymous"> set, and try without the React layer (which I don't recommend using anymore for perf and scalability reasons for VR, and seeing it mishandled most of the time).

ngokevin
  • 12,980
  • 2
  • 38
  • 84