刚刚还好好的，咋突然跨域了？

前两天有个小伙伴在交流群里问了个问题，就是下面这张图片。

里面的错误提示很清晰，其实就是发生跨域了。

这里使用的是 file: 协议，由于不存在 host，所以无法遵循浏览器同源策略，但是可以通过 XMLHttpRequest 对本地其他文件进行操作。

但是这种操作是有风险的，因为也可以对互联网的其他资源做同样的操作。

所以 Chrome 浏览器（WebKit 内核）不支持本地的 file: 协议访问，它觉得 file: 这种访问是不安全的，就给禁掉了。

这种安全策略就决定了 file: 协议访问的应用无法使用 XMLHttpRequest 对象，并且明确说明了跨域请求仅支持以下协议：http, data, chrome, chrome-extension, https。

但是我就要加载本地的文件怎么办，解决方法有很多种，一种就是使用 Firefox 浏览器，其允许访问同目录与子目录里的文件。

另一种常用的就是开启一个 Server，以 http 协议进行访问，绕过 file: 的限制。

当然不同的情况有不同的开启方式，对于 Sublime Text，可以使用插件 SublimeServer；对于 VSCode，使用插件 Live Server；当然啦，我们可以直接用 node 开启一个 http 服务。

更多文章：https://muyiy.cn