求助：NPM Live Server无法访问HTML中的本地文件与文件夹

核心原因 #

用live-server启动服务时，页面通过HTTP协议加载，而直接打开HTML用的是file://协议。浏览器的安全策略会阻止HTTP页面访问本地file://资源（跨协议安全限制），所以直接写本地绝对路径（比如C:\Users\aa\Desktop\...）会失效。

具体解决方法 #

方法1：使用相对路径（推荐）

把本地文件/文件夹放到live-server的服务根目录下，用相对路径引用：

• 示例：若index.html在C:\Users\aa\Desktop\my-project，图片放在my-project/images/photo.jpg，代码写：

  <img src="./images/photo.jpg" alt="示例图片">
  

• 文件夹若在服务根目录下（如my-project/docs），链接写：

  <a href="./docs/">查看文档文件夹</a>
  

启动live-server时指向根目录：

live-server C:\Users\aa\Desktop\my-project

方法2：通过--mount参数映射外部目录

如果不想移动文件，用--mount参数把本地目录映射到服务路径：
比如将C:\Users\aa\Desktop\my-files映射到服务的/my-files路径，启动命令改为：

live-server --mount=/my-files:C:\Users\aa\Desktop\my-files index.html

HTML中引用方式：

<a href="/my-files/">访问映射的文件夹</a>
<img src="/my-files/photo.jpg" alt="示例图片">

方法3：临时关闭Chrome安全限制（仅限测试）

仅用于本地临时测试，启动Chrome时添加参数关闭跨协议限制：

start chrome --allow-file-access-from-files http://127.0.0.1:8080

注意：此方法会降低浏览器安全性，不要用于日常浏览。

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