本地跨域怎么办？

刚开始做前端的朋友应该会遇到这个问题，本地页面在请求本地文件时会出现这个报错:

嗯，熟悉的单词，熟悉的跨域。

为什么会跨域呢？

因为这里使用的是 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 服务。