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.
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.
Share Improve this question edited Oct 28, 2017 at 17:39 Alexander O'Mara 60.5k19 gold badges172 silver badges181 bronze badges asked Oct 28, 2017 at 17:21 mark pavlismark pavlis 7321 gold badge5 silver badges9 bronze badges4 Answers
Reset to default 59Unlike 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.
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.
Issue
Resolution
Looks like you're trying to open the web-page locally (via file:// protocol) i.e. double clicking the .html file. Unfortunately modules only work via HTTP(s), so all you need to do is use a local web server. Popular choices include:
Live Server, a VS Code extension that adds a right-click option to run your pages with a local server.
Node static server, a simple http server to serve static resource files from a local directory.
Node live server is easy to install and use:
Lite-Server: BrowserSync does most of what we want in a super fast lightweight development server. It serves the static content, detects changes, refreshes the browser, and offers many customizations.
npm install -g live-server // Install globally via npm live-server // Run in the html's directory
Or even shorter and without altering your packages:
npx live-server
You can run any chromium based browser with the --allow-file-access-from-files flag to make importing from modules work locally through the file:// protocol.