如何解决Qt for WebAssembly运行时出现TypeError: Failed to fetch错误

问题原因 #

你遇到的报错是浏览器的默认安全策略导致的：

Fetch API cannot load file:///xxx.js. URL scheme "file" is not supported。

浏览器禁止file://本地文件协议下使用Fetch API加载其他本地资源，从你提供的qtloader.js代码也能看到，第249行调用了原生fetch方法加载依赖资源，双击打开html走的是file协议，自然触发报错。而emrun命令本质是启动了一个本地临时HTTP服务器，页面走http://协议访问，符合Fetch API的调用要求，因此运行正常。

解决方案 #

方案一：使用本地HTTP服务器启动（最推荐） #

不需要修改任何代码，也不会降低浏览器安全性，适合所有调试场景，常用启动方式如下：

• 如果你有Python3环境，直接在项目根目录（index.html所在目录）执行命令：
  python3 -m http.server 8080
  启动后在Chrome地址栏输入http://localhost:8080即可访问程序
• 如果你有Node.js环境，执行命令：
  npx http-server -p 8080
  同样访问http://localhost:8080即可
• 也可以用Nginx、Apache等成熟Web服务器，将项目目录挂载为站点根目录访问

方案二：修改Chrome启动参数临时禁用安全限制（仅适合本地调试） #

注意：该方案会降低浏览器安全防护能力，仅建议用调试专用的浏览器实例使用，不要用开启该参数的浏览器访问公网网页。

• Windows系统：右键Chrome快捷方式，选择「属性」，在「目标」输入框的内容末尾加一个空格，再追加参数--allow-file-access-from-files，保存后双击该快捷方式启动Chrome，再拖入本地index.html即可正常运行
• Linux系统：终端执行命令启动Chrome：
  google-chrome --allow-file-access-from-files
  之后打开本地html文件即可

方案三：资源内嵌（仅适合离线分发场景） #

如果需要做成双击即可运行的单文件离线页面，可以将依赖的.js、.wasm资源全部转成Base64格式内嵌到index.html中，修改qtloader.js的fetch逻辑直接读取内嵌资源，不需要发起网络请求。但该方案改造成本高，且每次重新编译Qt程序都需要重新处理内嵌资源，非必要不推荐。

内容的提问来源于stack exchange，提问作者siya