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

mar*_*lis 28 javascript google-chrome module same-origin-policy ecmascript-6

的index.html

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

code.js

export function answer(){
    return 'module';
}
Run Code Online (Sandbox Code Playgroud)

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

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

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

Ale*_*ara 33

与常规脚本不同,ES6模块遵循同源策略.这意味着如果import没有CORS标头(无法为本地文件设置),则无法从文件系统或跨源创建它们.

基本上,您需要从(本地)服务器运行此代码或在浏览器中禁用同源以进行测试(不要永久执行此操作).请参阅:CORS策略已阻止从源"null"访问映像.

  • 如果您没有时间设置本地服务器,您可以简单地使用:https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en (4认同)
  • 很有用,在花了一天时间寻找我的模块无法加载的原因之后,我从本地节点服务器运行了代码。结果。没有人在 JS 狂野中明确指出这一点,但很容易被忽视:-) (3认同)

Syd*_* C. 10

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

python3 -m http.server 8001

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