CORS issue with HTML5 canvas, javascript

Question

I have 2 HTML5 widgets, both made with Phaser.js and having images and audio, which are loaded on the fly by phaser library.

One of the widget(HTML5 file) works on local file system without XAMPP, while another only work when serve through XAMPP server.

I want to know why some HTML5 canvas files works without server while most of the time we require some server for canvas files.

Its a great confusion for me. Plz help.

Answer 1

There's a very good explanation of why you need a web server on the getting started page for Phaser.

What it boils down to is you need to use a web server because:

It's to do with the protocol used to access the files. When you request anything over the web you're using http, and the server level security is enough to ensure you can only access files you're meant to. But when you drag a file in it's loaded via the local file system (technically file://) and that is massively restricted, for obvious reasons. Under file:// there's no concept of domains, no server level security, just a raw file system.

...

Your game is going to need to load resources: images, audio files, JSON data, maybe other JavaScript files. And in order to do this it needs to run unhindered by the browser security shackles. It needs http:// access to the game files. And for that we need a web server.

Technically, none of your Phaser applications should run without a web server, it's quite odd that you got one of them to.

Answer 2

在您的预加载代码game.load.crossOrigin = true设置game.load.crossOrigin = true正常。