如何在本地浏览器测试ES模块import/export？遇CORS错误求助

出现这个错误的核心原因是：浏览器加载ECMAScript模块时会遵循CORS规则，而直接通过file://协议打开本地文件时，页面的origin是null，不在浏览器允许的跨域请求协议列表（http、https等）范围内，因此被拦截。

以下是几种可行的解决方法：

方法一：启动本地HTTP服务器（推荐） #

这是最安全且符合开发规范的方式，将本地文件通过HTTP协议访问：

• 使用Python内置服务器：
  打开终端，进入项目所在文件夹，根据Python版本运行对应命令：

  • Python 3：python -m http.server 8000
  • Python 2：python -m SimpleHTTPServer 8000
    运行后，在浏览器中访问http://localhost:8000/index.html即可正常加载模块。

• 使用Node.js的http-server工具：
  先全局安装工具：npm install -g http-server
  进入项目文件夹后运行：http-server
  终端会给出访问地址（通常是http://localhost:8080），在浏览器打开该地址即可。

• 使用VS Code的Live Server插件：
  在VS Code中安装Live Server插件后，右键点击index.html文件，选择「Open with Live Server」，插件会自动启动本地服务器并在浏览器中打开页面。

方法二：修改浏览器启动参数（仅临时测试用） #

该方法存在安全风险，不推荐用于日常开发，仅适合临时调试：

• Chrome/Edge浏览器：
  关闭所有浏览器窗口，找到浏览器快捷方式，右键选择「属性」，在「目标」栏的末尾添加 --allow-file-access-from-files（注意前面有空格），比如：

  "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
  

  点击「确定」后，通过该快捷方式启动浏览器，再直接打开本地的index.html文件即可。

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