Vanilla JavaScript中import语句报错及CORS问题解决方案咨询

Hey，你碰到的这两个问题是前端用ES模块时的经典坑，我帮你理清楚原因和解决办法：

第一个错误：Uncaught SyntaxError: Cannot use import statement outside a module #

原因 #

浏览器默认把普通<script>标签加载的JS文件当作传统脚本，不支持ES6的import/export语法。你给标签加type="module"的操作完全正确——这是告诉浏览器“这是个ES模块，按模块规则处理”，但这步操作也触发了第二个问题。

第二个错误：CORS政策阻止加载本地文件 #

原因 #

当你直接双击HTML文件用file://协议打开时，浏览器会把页面的 origin 设为null。而ES模块的加载遵循同源策略，浏览器出于安全考虑，禁止从null origin加载其他本地文件（防止恶意本地脚本读取你的电脑文件），所以就出现了这个CORS错误。

解决办法（按推荐程度排序） #

1. 启动本地HTTP服务器（最推荐，符合规范）

把本地文件放在HTTP服务器环境下运行，这样协议变成http://或https://，就不会触发CORS限制了。几种简单实现方式：

• Node.js http-server：先全局安装（需要先装Node.js），终端运行：

  npm install -g http-server
  

  然后进入你的项目文件夹，运行：

  http-server
  

  终端会输出本地访问地址（比如http://localhost:8080），用这个地址打开HTML文件即可。
• Python内置服务器：如果装了Python，直接在项目文件夹终端运行：

  # Python 3
  python -m http.server
  # Python 2
  python -m SimpleHTTPServer
  

  同样访问http://localhost:8000（默认端口）即可。
• VS Code Live Server插件：安装这个插件后，右键点击HTML文件，选择「Open with Live Server」，它会自动启动本地服务器并打开页面，全程不用敲命令，非常适合快速开发。

2. 临时修改浏览器设置（仅用于本地测试，不推荐长期用）

如果你只是临时快速测试，不想搭服务器，可以修改浏览器安全设置绕过限制，但注意这会降低浏览器安全性，测试完记得改回来：

• Chrome/Edge：右键浏览器快捷方式，在「目标」字段末尾添加（注意前面有空格）：

  --allow-file-access-from-files --disable-web-security
  

  然后重启浏览器即可。不过新版Chrome对这个限制更严，可能不一定生效。
• Firefox：在地址栏输入about:config，搜索privacy.file_unique_origin，把它设为false，重启Firefox即可。

3. 使用打包工具（适合大型项目）

如果你的项目比较复杂，可以用Webpack、Vite这类打包工具。它们会把所有ES模块打包成一个或多个普通JS文件，这样就不需要浏览器直接处理模块导入，自然也不会有CORS问题。比如用Vite的话：

npm create vite@latest my-project -- --template vanilla
cd my-project
npm install
npm run dev

启动开发服务器后，直接写ES模块语法就行，打包工具会帮你处理一切。

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