CORS Images Blocked on iPhone

Phaser 3
1

I’m building a Phaser game which is used in for In-App messages for a client. I do not have access to the Native App code. We use a platform called Braze to send these messages which come up in the app as a Webview.

The game works fine on Android, but images appear to be blocked on iPhone. I have tried Base64 encoded images - which worked but the client complains that excessive amount of code causes their Braze portal to crash.

I have also tried subverting the Phaser 3 loading with the following approach:

preload() {
       const imagesToLoad = [
          { key: 'chicken1', url: '....imageUrl' },
          { key: 'chicken2', url: '...imageUrl' },
       }
 // Load each image using native Image API
      imagesToLoad.forEach(imgData => {
          const img = new Image();
          img.crossOrigin = 'anonymous';
          
          img.onload = () => {
              // Add the loaded image to Phaser's texture manager
              this.textures.addImage(imgData.key, img);
          };
          
          // Start loading the image
          img.src = imgData.url;
      });

}
2

Do you know for sure it’s a CORS error on the iPhone? What happens with your workaround?

3

Hi, yes I managed to resolve it by hosting our images in S3 via Cloudfront. Obviously something about the way Braze hosts images it didn’t like