Wasm-bindgen: Fetch API cannot load file://xxxx.wasm file

[DarrenTsung]

I'm running into this error on Google Chrome (Version 67.0.3396.79 (Official Build) (64-bit)) when attempting to use wasm-bindgen with --no-modules:

Fetch API cannot load file:///example_wasm_file.wasm. URL scheme must be "http" or "https" for CORS request.

This is in the init() function of the generated js file. Is there any known workaround for this or is fetching a local file just broken in Chrome? It works fine on Firefox for me.

[jsheard]

There are some launch params that supposedly enable file:// access in Chrome but I could never get them to work, I'm guessing they only affect XMLHttpRequest and not the newer fetch API.

I'd suggest just using something like live-server, which has the side benefit of automatic reloading.

[alexcrichton]

Thanks for the report! If fetch doesn't work, what's the best way to load resources dynamically via the file:// url? If it's small enough we can probably just include it inline in the output

[jsheard]

Maybe inline the wasm in --debug mode, and fetch() it in release?

[alexcrichton]

I'd personally prefer to investigate something like XMLHttpRequest to see if that works with file:// urls

[leonwanghui]

Hi all, I have came across similar issues (see https://github.com/rustwasm/wasm-pack/issues/710), so what's the status of this issue?

[Pauan]

This is because of browser security restrictions: you cannot load file:// URLs in the browser, not even with XMLHttpRequest.

The solution is to use a local webserver like https (you only need to do cargo install https and then run http) and then access your project on http://localhost:8000

[alexcrichton]

I'm going to close this because I don't think that there's anything we can do about this, and wasm-bindgen will require some degree of HTTP server to serve up files. It's going to be on the tooling around wasm-bindgen to provide the server.

[mukeshsoni]

Does that mean i cannot use the wasm generated from rust using wasm-bindgen in a chrome extension?

[Pauan]

@mukeshsoni It's possible to use wasm-bindgen with Chrome/Firefox extensions (I've done that). The easiest way is to use the Rollup plugin.

Extension files aren't loaded from the file:// protocol, they're loaded from the chrome-extension:// protocol, so you just need to load chrome.runtime.getURL("/path/to/foo_bg.wasm")

[mukeshsoni]

I ended up using wasm-pack build --target web, using rollup to bundle my file (since webpack couldn't understand import.meta), and copying the generated wasm file to my dist file. That worked.

I did try using the rollup plugin but couldn't get it to work. Might give it another try once i finish the whole thing. Thanks for the pointer @Pauan

Edit -
I didn't look at the importHook section when i tried it last. That might have been the key step.

Edit 2 -
I was talking about a different rollup plugin https://github.com/DrSensor/rollup-plugin-rust 🤦🏽‍♂️

[Pauan]

@mukeshsoni The plugin I linked is our official Rollup plugin, so it should work fine (and it's kept up to date with wasm-bindgen). Any other plugins are unofficial and third-party, so we can't guarantee their correctness.

[archonic]

I agree that this isn't a wasm-bindgen concern but I'm trying out wasm and rust for the first time using the tutorial and I hit this. 100% of people doing the same will hit this issue. Perhaps the default template could include an intergration of live-server?

Update Didn't realize it would be as easy as sudo npm install -g live-server && cd dist && live-server, that's awesome.