本地HTML/CSS/JS应用使用fetch读取本地文件提示file scheme不支持错误

问题原因 #

这是浏览器针对file协议的同源安全限制导致的。你之前可以正常运行大概率是修改系统设置前，浏览器的对应安全规则未触发，调整设置后浏览器启用了严格的本地文件请求拦截规则。
你直接在地址栏输入文件路径可以访问，是因为浏览器允许用户主动打开本地文件，但Fetch/XHR这类异步网络请求对file协议的限制更严格，即使是同目录下的关联文件也会被默认拦截。

代码问题 #

你当前代码里加的mode: 'no-cors'配置完全不适用于该场景，该模式下请求即使成功也会返回不透明响应，无法读取到响应体的文本内容，首先要把这个配置删掉。

解决方案 #

方案1：修改浏览器设置（适合坚持直接打开HTML文件不启动服务的场景） #

注意该方案会降低浏览器安全等级，仅建议本地测试自用项目时使用，不要用修改后的配置日常上网：

• 针对Chrome/Edge浏览器：关闭所有已打开的浏览器窗口，右键浏览器桌面快捷方式选择「属性」，在「目标」输入框的原有内容末尾加一个空格，追加参数--allow-file-access-from-files，保存后通过该快捷方式打开浏览器即可正常运行项目。
• 针对Firefox浏览器：地址栏输入about:config进入高级设置页，搜索security.fileuri.strict_origin_policy，将该选项的值切换为false即可。

方案2：启动本地静态服务（更推荐，无安全风险） #

不用修改浏览器任何设置，在项目根目录启动一个临时静态服务即可：

• 已安装Node.js的环境，直接在项目根目录打开终端运行npx serve，之后访问终端输出的本地服务地址（默认是http://localhost:3000）即可
• 已安装Python3的环境，直接在项目根目录打开终端运行python -m http.server，之后访问http://localhost:8000即可
• 也可以安装VS Code的Live Server插件，右键index.html选择「Open with Live Server」一键启动服务运行项目

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