I’m building a Unity WebGL app hosted at mydomain.com that dynamically loads images from another domain (api.example.in). These images are used as elements for an AR experience.
Everything works perfectly on office Wi-Fi, but when I access the same app using mobile data, the image loading fails due to CORS (Cross-Origin Resource Sharing) errors in the browser console.
Here’s the relevant part of my JavaScript code in the WebGL index.html:
function createImageTargets(data, folderPath) {
const files = data.files;
files.forEach((file) => {
if (!file.match(/.(jpg|jpeg|png|gif)$/i)) return;
const imagetarget = document.createElement("imagetarget");
const id = file.replace(/.[^/.]+$/, "");
imagetarget.id = id;
const imageUrl = `${folderPath}/ARBuildsImages/${file}`;
imagetarget.setAttribute("src", imageUrl);
imagetarget.setAttribute("crossorigin", "anonymous");
document.body.appendChild(imagetarget);
});
}
- Accessing the image URLs directly works fine from office Wi-Fi, but from mobile data I get CORS errors in the browser console.
2.Removing crossorigin=”anonymous” doesn’t help—images still fail to load on mobile network.
3.The CORS error happens only on image loading, not API calls.
4.Accesing images directly in browser through link works fine.
What I’m expecting
To solve the cors issue and access to the image