Request for Help - WebGL Build Error

Unity Engine
1

Hello all,

I’ve been trying to build a simple game similar to patatap.com with animation and sound playing linked to keyboard input - with fade-ins on the animation using coroutines that scale alpha by deltaTime. When built as a standalone version, the program works as expected - however, when built as WebGL, I get this error when opening index.html:

6966905--820976--upload_2021-3-23_18-34-50.png
6966905--820976--upload_2021-3-23_18-34-50.png933×497 54 KB

(continued)
6966905--820982--upload_2021-3-23_18-35-12.png
6966905--820982--upload_2021-3-23_18-35-12.png940×179 22.9 KB

Apologies for the screenshots: I can’t figure out a way to copy and paste the error message, so it’s difficult for me to put this into a code block.

Upon investigation of the console, I find these errors:

Access to XMLHttpRequest at 'file:///C:/Users/justi/Documents/Code/Uncertain%20%20Tap/Builds/WebGL%20Final%20Build/Build/WebGL%20Final%20Build.data' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
Build/WebGL%20Final%20Build.data:1 Failed to load resource: net::ERR_FAILED
WebGL Final Build.framework.js:2 Fetch API cannot load file:///C:/Users/justi/Documents/Code/Uncertain%20%20Tap/Builds/WebGL%20Final%20Build/Build/WebGL%20Final%20Build.wasm. URL scheme must be "http" or "https" for CORS request.
doNativeWasm @ WebGL Final Build.framework.js:2
WebGL Final Build.loader.js:1 wasm streaming compile failed: TypeError: Failed to fetch
printErr @ WebGL Final Build.loader.js:1
WebGL Final Build.loader.js:1 falling back to ArrayBuffer instantiation
printErr @ WebGL Final Build.loader.js:1
WebGL Final Build.framework.js:2 Fetch API cannot load file:///C:/Users/justi/Documents/Code/Uncertain%20%20Tap/Builds/WebGL%20Final%20Build/Build/WebGL%20Final%20Build.wasm. URL scheme must be "http" or "https" for CORS request.
getBinaryPromise @ WebGL Final Build.framework.js:2
WebGL Final Build.loader.js:1 both async and sync fetching of the wasm failed
WebGL Final Build.loader.js:1 both async and sync fetching of the wasm failed
printErr @ WebGL Final Build.loader.js:1
WebGL Final Build.loader.js:1 failed to asynchronously prepare wasm: TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object

However, if I build and run directly from the editor, I find that all functions except for loading my animations function perfectly. Additionally, after refactoring my code to not use coroutines, I find the same behavior. It is worth mentioning that the animation database that I am using is loaded from Resources, and is relatively large compared to the sound database I am loading (also from Resources). However, I have little experience with WebGL exporting in particular, and any help as to what could be causing this error and if the problem could be fixed is much appreciated! Additionally, please let me know if there is any other code I can attach that would help diagnose the situation.

Thanks!

EDIT: It is also worth mentioning that I plan to upload this build to simmer.io as a hosting service - I’ve seen similar solutions relating to CORS issues that use PHP proxies and other such tools (if I’m not mistaken), but I won’t be able to use such workarounds as I’m planning to upload the build to a 3rd party hosting server.

2

This is an error I get when I open the *.html file directly from Explorer and it’s okay.
If you set up a server locally and access it from the server, that is, if you access it with the URL http://~ or https://~, you can execute it without error.

3

Thanks for the reply! Accessing the file directly with that URL doesn’t seem to work (likely because I don’t have a server setup to do so). However, I have found that Building and Running from the Unity editor (which I assume creates a temporary server to host on) does work without the error - however, the animations are still not playing.

However, I have seen that upon uploading to simmer (the third-party hosting service) I’m getting similar behavior with the animations not playing, while all the other components of the project work perfectly. Is there any way I can diagnose what’s happening here or is that all on the side of the hosting service?

I can provide code towards my file loading and playing system if the bug is on that end!