如何修复Edge/Chrome中引入JS的“Not allowed to load local resource”错误

1. 修正JS文件引入路径 #

• 禁止使用本地绝对路径（如file:///C:/user/xxx/xxx.js这类写法），必须替换为相对路径：
  • 如果JS文件和HTML文件在同一文件夹，直接写实际JS文件名，例：<script src="./my-script.js" defer></script>
  • 如果JS文件在HTML同级的js子文件夹中，写法为<script src="./js/my-script.js" defer></script>
• 不要使用占位符File_source作为src值，必须填写实际的相对路径文件名。

2. 排查Chrome静态服务器扩展的配置问题 #

扩展失效基本是根目录配置错误导致：

• 静态服务器扩展的根目录必须选中存放HTML、JS文件的最外层文件夹，不能错选到其他无关文件夹，否则服务器无法解析到对应JS资源，仍会触发加载错误。
• 启动扩展后，不要直接打开本地HTML文件，必须通过扩展生成的http://localhost:xxxx地址访问页面。

3. 扩展失效时的替代静态服务方案 #

如果Chrome扩展反复异常，直接用系统命令行启动本地静态服务，稳定性更高：

• 已安装Python3的环境下，在HTML所在的文件夹打开终端，执行python -m http.server 8000，之后在浏览器访问http://localhost:8000打开对应HTML页面即可。
• 已安装Node.js的环境下，在HTML所在的文件夹打开终端，执行npx serve，按照终端输出的本地访问地址打开页面即可。

4. 必查的基础操作项 #

• 禁止直接双击本地HTML文件、通过file://协议打开页面，浏览器默认安全策略会拦截这类场景下的本地资源加载请求，必须通过上述静态服务的http://本地地址访问页面。

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