I'm currently developing a WebGL application that utilizes data from the Soundcloud API.
My goal is to utilize ThreeJS in order to load track artwork and waveform PNGs into textures for sprites.
However, I am encountering an error in chrome:
The browser is blocking images from the origin [soundcloudapi] due to Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have been researching CORS, and it appears that Soundcloud has some support for CORS with JSON data (Soundcloud CORS) but I am unsure if this extends to requesting associated png files for tracks.
In addition, I have looked into Three.js and CORS, so I added the following line:
THREE.ImageUtils.crossOrigin = '';
I placed this before any call to 'loadTexture()', but the error persists.
I thought about a potential workaround of requesting the PNG file in javascript and then making an AJAX request to a PHP file which would grab the image and temporarily store it on our server, but this solution may not be efficient if the app gains popularity (and could potentially raise legal concerns with Soundcloud). Therefore, I would like to explore alternative options as much as possible.
Has anyone faced a similar issue before or have any suggestions?
Thank you for your time.