使用type="module"时出现CORS错误，同源本地文件为何报错？

你的问题核心是**file://协议的特殊限制**，和你熟悉的HTTP协议下的同源规则不一样：

1. 双击打开index.html时，浏览器使用的是file://协议（地址栏会显示类似file:///D:/examplefolder/index.html），而非常规的http:///https://协议。
2. 你用<script type="module">引入的JS属于ES模块，这类模块的加载机制强制遵循同源策略，但浏览器对file://协议的同源判定异常严格——哪怕两个文件在同一文件夹，也可能被判定为不同源，再加上本地文件无法提供CORS所需的HTTP响应头，直接触发了CORS错误。
3. 你认为「同一文件夹就是同源」的结论在HTTP协议下是成立的，但在file://协议下不适用。

解决方法 #

不要直接双击打开HTML文件，改用本地HTTP服务器运行：

• Python：打开命令行进入D:/examplefolder文件夹，Python3运行python -m http.server，Python2运行python -m SimpleHTTPServer，之后在浏览器访问http://localhost:8000。
• Node.js：先全局安装http-server（npm install -g http-server），进入目标文件夹后运行http-server，访问控制台给出的本地地址即可。
• VSCode插件：安装「Live Server」插件，右键点击index.html选择「Open with Live Server」，插件会自动启动本地服务器并打开文件。

内容的提问来源于stack exchange，提问作者curiousmind