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

问题描述 投票:23回答:2

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

错误:CORS策略阻止了对来自'null'的'file:/// C:******* / es6 / code.js'中的脚本的访问:响应无效。因此不允许原点'null'访问。

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

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

javascript google-chrome module ecmascript-6 same-origin-policy
2个回答
30
投票

与常规脚本不同,ES6模块受same-origin policy的限制。这意味着您无法在没有CORS标头(无法为本地文件设置)的情况下从文件系统或跨源来import

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


1
投票

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

python3 -m http.server 8001

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

© www.soinside.com 2019 - 2024. All rights reserved.