...origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
这个错误是因为你直接通过本地文件系统（file:// 协议）打开 HTML 文件，而现代浏览器出于安全考虑，禁止通过 file:// 协议进行跨域模块加载（ES6 import 属于跨域请求的一种）。
解决方法：使用本地服务器运行文件
你需要通过 HTTP 服务器来访问这些文件，而不是直接双击打开。以下是几种简单的实现方式：
方法 1：使用 VS Code 的 Live Server 插件（推荐）
- 在 VS Code 中安装「Live Server」插件
- 右键点击你的 HTML 文件
- 选择「Open with Live Server」
- 浏览器会自动打开
http://127.0.0.1:5500/或类似地址，此时 CORS 错误会消失
方法 2：使用 Python 内置服务器（无需安装额外软件）
- 打开终端 / 命令提示符
- 导航到你的 HTML 和 JS 文件所在目录
cd /path/to/your/files
- 运行以下命令启动服务器：
-
Python 3.x:
python -m http.server -
Python 2.x:
python -m SimpleHTTPServer ```
- 在浏览器中访问
http://localhost:8000
方法 3：使用 Node.js 的 http-server（需要安装 Node.js）
- 全局安装 http-server：
npm install -g http-server
- 进入文件目录并启动：
cd /path/to/your/files
http-server
- 访问
http://localhost:8080
为什么会出现这个错误？
-
当你直接双击 HTML 文件时，浏览器使用
file://协议访问 -
ES6 模块的
import语句会触发跨域请求检查 -
浏览器不允许
file://协议下的跨域请求，因此出现 CORS 错误 -
通过 HTTP 服务器访问时，使用的是
http://协议，符合浏览器的安全策略
选择上述任意一种方法启动本地服务器后，你之前编写的模块导入代码就能正常工作了。
