如何在浏览器中本地使用 javascript type="module" [重复]答案

【问题标题】：How to use javascript type="module" locally in browser [duplicate]如何在浏览器中本地使用 javascript type="module" [重复]
【发布时间】：2021-04-24 08:02:33
【问题描述】：

我正在使用本地服务器进行一个项目。

在这个项目中，我正在使用模块，所以我的index.html 包含：

    <script src="js/index.js" type="module"></script>

我的index.js 包含：

    import {} from "/js/randomModule.js";
    import {} from "/js/randomModule.js";
    ...

一切运行完美，但是当我想直接在浏览器上使用该项目时，没有服务器，这就是问题：

Access to the script at 'file:///C:/Users/myFolder/js/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:54 

GET file:///C:/Users/myFolder/js/index.js net::ERR_FAILED

那么，有没有办法在没有服务器的情况下直接在浏览器中使用 javascript type="module"？

【问题讨论】：

考虑使用简单的服务器而不是直接在浏览器中打开文件？如果您使用的是 unix/mac 并安装了节点，我建议所有平台使用 npx serve npmjs.com/package/serve 或 browsersync.io
或在您的编辑器或浏览器中安装实时预览扩展

标签： javascript browser server module

【解决方案1】：

如MDN docs about JS modules 所述：

您需要注意本地测试 — 如果您尝试加载本地的 HTML 文件（即使用 file:// URL），您将遇到 CORS 由于 JavaScript 模块安全要求而导致的错误。你需要做通过服务器进行测试。

很遗憾，没有服务器，你不能直接在浏览器中运行带有“type='module'”的JS。

有很多选项可以运行本地服务器：W/X/LAMP 堆栈、oldschool php -S localhost:8080、带有 express.js 和静态目录的节点等。

【讨论】：

【解决方案2】：

您不能使用 MDN 文档中所述的 file:// 协议来做到这一点：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts

【讨论】：