Chrome 62/Chrome Canary 64 中的 ES6 模块支持，在本地不工作，CORS 错误答案

【问题标题】：ES6 module support in Chrome 62/Chrome Canary 64, does not work locally, CORS errorChrome 62/Chrome Canary 64 中的 ES6 模块支持，在本地不工作，CORS 错误
【发布时间】：2018-04-10 02:06:09
【问题描述】：

索引.html

<html>
    <head>
    <script type="module">
        import {answer} from './code.js'
        console.info("It's ${answer()} time!")
    </script>
    </head>
    <body>
    </body>
</html>

code.js

export function answer(){
    return 'module';
}

错误：从源“null”访问“file:///C:*******/es6/code.js”处的脚本已被 CORS 策略阻止：响应无效。因此不允许访问 Origin 'null'。

Chrome 说它可以支持模块，并且我已经看到了在网络上运行的示例，但是当我将它们复制下载并在本地运行它们时，我总是收到上述错误。我不想使用 Babel、Webpack 等。

我已尝试在 Chrome 和 Chrome Canary 中启用 Experimental Web Platform features 标志。

【问题讨论】：

标签： javascript google-chrome module ecmascript-6 same-origin-policy

【解决方案1】：

与常规脚本不同，ES6 模块受same-origin policy 约束。这意味着您不能从文件系统中import 它们或在没有 CORS 标头的情况下跨域（无法为本地文件设置）。

基本上，您需要从（本地）服务器运行此代码或在浏览器中禁用同源进行测试（不要永久这样做）。见：Access to Image from origin 'null' has been blocked by CORS policy。

【讨论】：

谢谢亚历山大！！！知道如果我尝试使用电子会发生什么吗？
@markpavlis 我猜 Electron 没有这样的安全限制，但我不确定。
另外：导入模块时，指定模块位置的字符串称为“模块说明符”或“导入说明符”。查看有效和支持的模块说明符（来自 './lib.mjs' 是有效的，但不是来自 'lib.mjs'）。检查：developers.google.com/web/fundamentals/primers/modules 即将允许使用不同的说明符。
有用，花了一天时间寻找我的模块无法加载的原因后，我从本地节点服务器运行代码。结果。没有人在 JS 领域指出这一点显而易见但又容易被忽视 :-)
如果你没有时间设置本地服务器，你可以简单地使用：chrome.google.com/webstore/detail/web-server-for-chrome/…

【解决方案2】：

我遇到了同样的问题，尝试导入 es6 代码以在浏览器的 html 文件中启动，在浏览器控制台中出现 CORS 错误。如果您的机器上有 python，那么创建本地服务器的一种简单方法是：

python3 -m http.server 8001

从您正在工作的文件夹中。

【讨论】：