Jump to content

Cross-origin image load denied by Cross-Origin Resource Sharing policy

Go to solution Solved by rich,

Recommended Posts



I am using a CDN to deliver game assets to the page, and I have CORS enabled so getting these images to load cross-domain has been working fine.


However, I am drawing these images to a canvas, editing them, and then using canvas.toDataURL() to get the canvas back as an image. This all works fine, as CORS was enabled for any image drawn and therefore the canvas isn't dirty.


When I try to use the resulting URL to load an image in Phaser, I get the following error:


"Cross-origin image load denied by Cross-Origin Resource Sharing policy"


The url for the image looks something like data:image;base64aaGAsDFAHHAr... so it seems like it is just locally stored, which makes me confused as to how this is a cross-origin issue.


I am able to create a javascript Image object with the url as the source and add it to the page no problem, it is only when I try to load it in Phaser does it complain.


As for solutions, I am wondering if there is a way to load an image in Phaser from a javascript Image object instead of a URL? I ask because I can set the image.crossOrigin property which might solve the issue.


Any other solutions or experience with CORS and Phaser would also be helpful.



Link to post
Share on other sites
  • 2 years later...

At what point is game.load available?  I'm trying to set the crossOrigin value right after I create the Phaser.Game instance, however, it is null at that point.

I've built a web development environment that can be used to create phaser games.  A bunch of games have already been published, so trying to modify their source to add this one line will be a pain.  My goal is to set the Loader.crossOrigin value outside of the game source code.  I have my application hooked up so it can be notified when the game is created, but as stated previously, game.load in unavailable right after creating the game.  Is there maybe a way I can force phaser to initialize the loader right after creating the game instance?

Link to post
Share on other sites

Sometimes you just have to read the source code...

After looking into it, I noticed that Game.load is set inside Game.boot.  Trying to call Game.boot early resulted in an error "Phaser.Game - Cannot create Canvas or WebGL context, aborting.".  Digging more into the source code, I saw that Phaser.Game waits until the device is ready to call Game.boot.  Using the same logic, I set up an event handler using Phaser.Device.whenReady to set game.load.crossOrigin.  All assets are now loading!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...