Firefox中navigator.requestMIDIAccess()网站可用本地文件不可用的原因

问题原因 #

Firefox对file://协议的高级API（如WebMIDI）有额外安全限制，即使window.isSecureContext返回true，浏览器也默认不加载该API，导致navigator.requestMIDIAccess()报错。

解决方案 #

方案1：调整Firefox配置（直接启用file://下的WebMIDI） #

• 打开Firefox，地址栏输入about:config回车，确认风险提示
• 搜索配置项security.fileuri.strict_origin_policy，将值改为false
• 搜索dom.webmidi.enabled，确保其值为true（网站环境能正常使用的话，该项通常已开启）
• 重启Firefox后，重新用file:///访问本地文件，WebMIDI API即可正常调用

方案2：搭建本地HTTP服务器（更推荐，规避file://的其他限制） #

本地HTTP服务器环境和线上网站一致，不会触发Firefox对file://的API限制：

• Python 3：在本地文件所在目录打开终端，运行命令：

  python3 -m http.server 8000
  

  然后在Firefox中访问http://localhost:8000/你的文件名.html
• Node.js：先全局安装http-server工具：

  npm install -g http-server
  

  进入文件目录后运行：

  http-server
  

  按照终端提示的地址（通常是http://localhost:8080）访问本地文件

补充说明 #

你查询权限返回prompt是因为权限系统本身正常，但WebMIDI API未被浏览器加载。上述两种方案都能解决API加载问题，其中本地HTTP服务器的方式更符合Web应用常规运行环境，可避免后续可能遇到的其他file://协议限制。

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