关于ES6使用模块化会发生同源策略的原因

使用模块化如下：

script使用type="module"，导出外部文件.js的函数使用

结果报错如下：

报错翻译：来自orgin的“null”已被CORS策略(同源策略)阻止:跨源请求只支持协议方案:http，数据，chrome, chrome-extension, https。

原因：

ES6 使用模块的时候要在标签中声明 type="module"，而这类使用了模块的 script 是受限于同源策略的，默认会发起cors跨域请求，问题来了，这种请求要求 request header 的 origin 必须带有 http 等类型，但是 file 协议下，origin 是空的，也就是不符合这个要求，如果在这种情况下依然要发送请求，那就会报错了。

拓展：

①script标签是自带跨域的功能的

②跨域导致的原因是协议、域名、端口号不同就会导致，而这里的协议通常是指http协议，https等协议。也就是说http, data, chrome, chrome-extension, https这些协议是支持跨域请求的，而file协议并不支持。

解决办法：

①通过搭建本地一个服务器去进行资源的问题来解决跨域问题。

②右键vs code---直接用live sever打开，没有的去安装一个叫Live Sever的插件即可。