Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ES6 module support in Chrome 62/Chrome Canary 64, does not work locally, CORS error

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

Error: Access to Script at 'file:///C:*******/es6/code.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Chrome says it can support modules and I have seen examples working on the web, but when I copy them of download and run them locally, I always get the error above. I do not want to use Babel, Webpack, etc.

I have tried enabling the Experimental Web Platform features flag in both Chrome and Chrome Canary.

like image 210
mark pavlis Avatar asked Oct 28 '17 17:10

mark pavlis


2 Answers

Unlike regular scripts, ES6 modules are subject to same-origin policy. This means that you cannot import them from the file system or cross-origin without a CORS header (which cannot be set for local files).

Basically you need to run this code from a (local) server or disable same-origin in the browser for testing (do not do this permanently). See: Access to Image from origin 'null' has been blocked by CORS policy.

like image 70
Alexander O'Mara Avatar answered Oct 19 '22 20:10

Alexander O'Mara


I've run in the same problem, trying to import es6 code to launch in a html file in my browser, getting CORS errors in my browser console. If you have python on your machine one easy way to create a local server is to:

python3 -m http.server 8001

From the folder your are working in.

like image 14
Sydney C. Avatar answered Oct 19 '22 21:10

Sydney C.