54

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.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
mark pavlis
  • 681
  • 1
  • 5
  • 9

4 Answers4

56

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.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
  • 1
    Thanks Alexander!!! Any idea what will happen if I try to use electron? – mark pavlis Oct 29 '17 at 21:48
  • @markpavlis I would guess Electron does not have such security restrictions, but I don't know for sure. – Alexander O'Mara Oct 29 '17 at 21:51
  • Also: When importing modules, the string that specifies the location of the module is called the “module specifier” or the “import specifier”. Have a look at the valid and supported Module specifiers (from './lib.mjs' is valid, but not from 'lib.mjs'). Check: https://developers.google.com/web/fundamentals/primers/modules Different specifiers will be allowed soon. – Luchux Jun 22 '18 at 19:16
  • 4
    Useful, after a day spent searching for a reason why my module wouldn't load, I ran the code from a local node server. Result. No-one makes this obvious but easily-overlooked point out there in the JS wild :-) – Dave Everitt Jun 25 '18 at 16:31
  • 4
    If you don't have time to setup a local server, you can simply use: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en – Himanshu Aggarwal Jun 30 '19 at 05:47
  • @AlexanderO'Mara I've one doubt though, luckily I was reading your answer https://security.stackexchange.com/a/201313 but can't understand how a local file request from local itself is not same-origin? – user7630232 Jan 12 '21 at 18:23
  • 1
    @user7630232 I believe that would be because `file://` protocol is treated as an [*opaque origin*](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#file_origins) and it never passes the same-origin test and thus leads to a CORS error. – Zoso Mar 02 '22 at 11:39
17

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.

Sydney C.
  • 950
  • 10
  • 21
0

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.

Joel Sahlin
  • 51
  • 1
  • 7
0

Issue 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
navalega0109
  • 47
  • 4