JavaScript模块引入触发CORS错误：Brackets预览正常直接打开报错

嘿，这个问题我太熟了！咱们来理清楚到底咋回事，再给你几个靠谱的解决办法：

你直接双击打开本地HTML文件时，浏览器用的是file://协议，而JavaScript模块的加载受浏览器同源策略限制——浏览器会把file://下的文件当成不同的源，所以加载./libA.js这种模块文件时就触发了CORS报错。

但Brackets的实时预览不一样！它暗地里给你启动了一个本地HTTP服务器（地址一般是http://localhost:xxxx这种），这时候所有文件都是通过HTTP协议加载的，属于同一个域名（localhost），自然就符合同源策略，模块加载就正常了。

这里给你三个实用的方案，按需选就行：

• 方案1：继续用Brackets实时预览（最简单）
  既然已经能正常跑起来，日常开发直接用这个方式就好，省心又方便，完全能满足学习JS模块的需求。

• 方案2：自己搭个本地HTTP服务器
  要是不想依赖编辑器的预览功能，自己搭个轻量服务器超简单：

  • 如果你装了Node.js，打开终端进到项目文件夹，直接跑npx serve就行——终端会告诉你访问地址（比如http://localhost:3000），打开这个地址就不会有CORS问题了。
  • 用Python的话，Python3运行python -m http.server，Python2运行python -m SimpleHTTPServer，同样能启动本地服务器。

• 方案3：修改浏览器安全设置（不推荐）
  可以给浏览器加启动参数绕过file://的CORS限制，比如Chrome可以加--allow-file-access-from-files。但这个方法会降低浏览器的安全性，只适合临时测试用，不建议日常开发这么干。

最后再确认下你的代码结构（应该没问题，就是协议的锅）：
你的index.html：

<!DOCTYPE html>
<html>
<head>
  <title> JS </title>
</head>
<body>
  <script type="module">
    import {add} from './libA.js';
    console.log(add(10,20));
  </script>
</body>
</html>

对应的libA.js应该是这样：

export function add(a, b) {
  return a + b;
}

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