本地引入普通脚本正常，添加type="module"后遇CORS错误无法加载的相关问题咨询

嗨，我来帮你理清这个问题的来龙去脉，顺便给你几个实用的解决方案～

为啥加type="module"就会触发CORS错误？ #

这其实是浏览器的安全机制在起作用！

当你用普通<script>标签引入脚本时，浏览器对file://协议（本地直接打开文件的方式）的限制比较松；但一旦把脚本标记为ES6模块（type="module"），浏览器就会严格遵循同源策略和CORS规则——而file://协议并不在这些规则允许的范围内。

浏览器这么做是为了保护你的本地文件安全：ES模块可以通过import加载其他文件，如果允许file://下的模块自由加载，恶意脚本理论上能读取你本地硬盘上的其他敏感文件，这显然是个巨大的安全漏洞。

不用打包/内嵌脚本，怎么在本地用ES6模块？ #

完全不用复杂的打包工具，几个简单的方法就能解决：

• 用Python内置HTTP服务器（最方便，无需额外安装）
  打开终端，进入你的project文件夹：

  • 如果是Python3，运行：python -m http.server 8000
  • 如果是Python2，运行：python -m SimpleHTTPServer 8000
    之后在浏览器里访问http://localhost:8000/index.html，这样所有文件都通过HTTP协议加载，就不会有CORS问题了。

• 用Node.js的http-server工具
  先全局安装：npm install -g http-server
  然后进入project文件夹，运行：http-server
  终端会给出访问地址（比如http://localhost:8080），用这个地址打开页面就行。

• 浏览器启动参数（不推荐，仅限临时测试）
  比如Chrome，可以在启动时添加--allow-file-access-from-files参数，强制浏览器允许file://下的文件访问，但这会降低浏览器的安全防护，日常开发不建议这么用。

未来浏览器会支持file://下的ES模块吗？ #

大概率不会。浏览器厂商一直把本地文件的安全防护放在优先位置，放开file://下的ES模块支持意味着要打破现有的安全边界，带来不可控的风险。所以长期来看，用本地HTTP服务器加载文件依然是最安全、最稳妥的方案。

备注：内容来源于stack exchange，提问作者Gabriel Andrade