![1d2b091d5090b83350371b8dfaeabd26.png](https://img-blog.csdnimg.cn/img_convert/1d2b091d5090b83350371b8dfaeabd26.png)
刚开始做前端的朋友应该会遇到这个问题,本地页面在请求本地文件时会出现这个报错:
![86042ab95f448f9253152997fac0265d.png](https://img-blog.csdnimg.cn/img_convert/86042ab95f448f9253152997fac0265d.png)
嗯,熟悉的单词,熟悉的跨域。
![99bf09f58d3c4b132046845dfb0d30b2.png](https://img-blog.csdnimg.cn/img_convert/99bf09f58d3c4b132046845dfb0d30b2.png)
为什么会跨域呢?
因为这里使用的是 file: 协议,由于不存在 host,所以无法遵循浏览器同源策略,但是可以通过 XMLHttpRequest 对本地其他文件进行操作。但是这种操作是有风险的,因为也可以对互联网的其他资源做同样的操作。所以 Chrome 浏览器(WebKit 内核)禁用了本地的 file: 协议访问,它觉得 file: 这种访问是不安全的,就给禁掉了。这就决定了 file: 协议访问的应用无法使用 XMLHttpRequest 对象,并且明确说明了跨域请求仅支持以下协议:http, data, chrome, chrome-extension, https。
那我就是要加载本地的文件怎么办?
1.使用 Firefox 浏览器,其允许访问同目录与子目录里的文件。
2.开启一个 Server,以 http 协议进行访问,绕过 file: 的限制。
当然对不同的开发工具有不同的开启方式,使用HBuilder和webStrom的朋友应该没有这个烦恼因为工具自带http服务,对于 Sublime Text,可以使用插件 SublimeServer;对于 VSCode,使用插件 Live Server;当然啦,我们可以直接用 node 开启一个 http 服务。