项目构建后访问本地文件报错咨询：Not allowed to load local resource

嘿，这个问题我之前帮好几个开发者踩过坑，本质就是浏览器的安全限制在搞怪！先给你拆解下问题根源：

当你通过XAMPP的Apache服务器访问项目（也就是用http://localhost/...这类地址打开网页），浏览器会把这个页面归为HTTP上下文，这时候你直接用file:///C:/xampp/htdocs/maths/media/1546737736816.jpg这种本地文件协议路径加载资源，就触发了浏览器的同源安全策略——file://和http://属于完全不同的源，浏览器为了防止恶意网页偷偷读取你的本地文件，会直接拦截这个请求，就出现了你看到的报错。

给你几个直接能用的解决办法：

• 改用相对路径引用资源：
  你的图片放在xampp/htdocs/maths/media/目录下，假设你的网页文件在maths文件夹里，直接写<img src="media/1546737736816.jpg">就行；如果网页在根目录（htdocs下），就写<img src="maths/media/1546737736816.jpg">。这样Apache会通过HTTP协议帮你读取并返回资源，完全符合浏览器的安全规则。

• 使用服务器端绝对URL：
  直接把资源地址写成http://localhost/maths/media/1546737736816.jpg，明确走HTTP协议，浏览器就不会再拦截了。这种方式适合需要跨页面或者跨目录引用资源的场景。

• 检查代码里的硬编码路径：
  翻一下你的HTML、CSS或者JS代码，把所有硬编码的file:///开头的路径都替换成上面两种格式。比如把CSS里的background-image: url('file:///C:/...')改成background-image: url('media/1546737736816.jpg')。

简单来说，核心就是：从服务器加载的网页，资源也要从服务器走，别直接绕去本地文件系统。

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