Question

的index.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';
}

错误：在＆＃39; file：/// C：******* / es6 / code.js＆＃39;访问脚本来自起源＆＃39; null＆＃39;已被CORS策略阻止：响应无效。起源＆＃39; null＆＃39;因此不允许访问。

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

我已尝试在Chrome和Chrome Canary中启用实验性网络平台功能标记。

Answer 1

与常规脚本不同，ES6模块受same-origin policy的约束。这意味着如果没有CORS标头（无法为本地文件设置），您无法从文件系统{cross}来源import它们。

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

Answer 2

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

python3 -m http.server 8001

从您正在使用的文件夹中。

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

2 个答案: