HTML [SOLVED]Problem loading images and audio when html file is opened directly

[poppydephary]

I have decided to try making a game with HTML, vanilla JS, and CSS, essentially a web page presenting as a visual novel. Not looking for alternatives like Renpy or TyranoBuilder at the moment.

Everything works fine when hosted, but not when I open my index.html directly. When assets need to be loaded, be it images, video, audio, I get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:  *filepath* (Reason: CORS request not http).

The way I am displaying images, video, and playing audio is nothing special, looks something like this:

<img src="./myImage.png">
<video src="./myVideo.mp4" loop></video>
<audio src="./myAudio.ogg"></audio>

I see Twine Sugarcube projects able to open from index.html without issues loading assets, and am wondering how they do it, or some other solution that allows the game load assets even when index.html is opened directly.

More details in case it matters, the project consists of 1 HTML file, 1 JS file, and 1 CSS file. Pages are merely divs being displayed and hidden.

 

[guest1492]

There is nothing wrong with the code you've shown above and it works just fine for me.

 

[aereton]

Looks like your standard file:// protocol issue.

You must be registered to see the links

Local files from the same directory and subdirectories were historically treated as being from the

You must be registered to see the links

. This meant that a file and all its resources could be loaded from a local directory or subdirectory during testing, without triggering a CORS error.

Unfortunately this had security implications, as noted in this advisory:

You must be registered to see the links

. Many browsers, including Firefox and Chrome, now treat all local files as having opaque origins (by default). As a result, loading a local file with included local resources will now result in CORS errors.

Developers who need to perform local testing should now

You must be registered to see the links

. As all files are served from the same scheme and domain (localhost) they all have the same origin, and do not trigger cross-origin errors.

 

[poppydephary]

Looks like your standard file:// protocol issue.

You must be registered to see the links

Thanks, informs me of why I am encountering this issue when opening index.html directly. Still, why do projects made using Sugarcube not seem affected by this?

There is nothing wrong with the code you've shown above and it works just fine for me.

Are you opening the html directly?

 

[osanaiko]

Looks like your standard file:// protocol issue.

You must be registered to see the links

A solution for this specific problem that I've seen in a few HTML games is to include a mini local html server executable in your distribution archive. I've attached an example that i shamelessly stole from another game, and hacked it a bit to remove references.

NO WARRANTY that it will actually work, but give it a try...

 

[guest1492]

Are you opening the html directly?

Yes. Another example, A Spell For All (not a Twine game):


I've seen the issue pointed out by aereton happen, but only when attempting to play a local HTML file on my android phone (probably will occur in all smart phones) without using an app like JoiPlay.

 

[averagehtmlenjoyer]

Try setting the image path on startup with something like this in StoryInit:

<<set $imgDir to 'resources/'>>

And then using Twine code to show the images instead of HTML:

[img[$imgDir + 'image.jpeg']]

 

[Alcahest]

I see Twine Sugarcube projects able to open from index.html without issues loading assets, and am wondering how they do it, or some other solution that allows the game load assets even when index.html is opened directly.

I don't think it has to do with Twine/Sugarcube but with your code doing stuff that would trigger the CORS error if you used it in Twine too. I may be wrong, but I suspect you do more than just simply calling files like you showed.

Make a file called whatever.html and put this inside:
<img src="./test1.jpg">
And put test1.jpg in the same folder as whatever.html.
Are you still getting the CORS error when opening the html (I don't)? If not, then figure out what you're doing differently in your game.

 

[poppydephary]

Try setting the image path on startup with something like this in StoryInit:

<<set $imgDir to 'resources/'>>

And then using Twine code to show the images instead of HTML:

[img[$imgDir + 'image.jpeg']]

You misunderstand, I am not using Twine nor Sugarcube, I was using any project made using them as a positive example.

I don't think it has to do with Twine/Sugarcube but with your code doing stuff that would trigger the CORS error if you used it in Twine too. I may be wrong, but I suspect you do more than just simply calling files like you showed.

Make a file called whatever.html and put this inside:
<img src="./test1.jpg">
And put test1.jpg in the same folder as whatever.html.
Are you still getting the CORS error when opening the html (I don't)? If not, then figure out what you're doing differently in your game.

Duly noted. With a fresh mind I decided to make a clean project to try it out. No problems encountered. I eventually discovered I had this piece of code knocking around which was the true cause of my issue:

function CheckFileExist(url){
    if(!url){
        return false;
    }
    let xhr = new XMLHttpRequest();
    xhr.open("HEAD", url, false);
    xhr.send();
    return xhr.status != 404;
}

And this was the true warning I was supposed to be looking out for:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/