60

I am trying to understand modules in JavaScript but when I try to write a very simple module I get CORS error.I am using bracket as my text editor and the odd part is when I'm using live preview in brackets the code works but when I normally open the .js file I get error.

index.html 

<!DOCTYPE html>
    <html>
    <head>
        <title> JS </title>
    </head>
    <body>
        <script type="module">
            import {add} from './libA.js'; 
            console.log(add(10,20));
        </script>
    </body>
    </html>

libA.js

export function add(a,b) {
        return a+b ;
    }

*I get this error -> 

Access to Script at 'file:///F:/WEB%20DEV/JavaScript/libA.js' from origin `null` has been blocked by CORS policy: 
Invalid response. 
Origin 'null' is therefore not allowed access.

(I even tried the latest version of chrome too)

Improve this question

3 Answers 3

Reset to default
46

Many browsers do not allow you to access files on the local filesystem with JavaScript (even if the HTML document is also on the local filesystem).

This extends to loading JavaScript modules.

Install a webserver and use that (with a URL like http://localhost/) for testing.

Improve this answer
6
  • tnx .. but if I use webpack or babel is it possible to my module works ?
    – Ahmad Reza
    Commented May 6, 2018 at 8:15
  • @AhmadReza — They rewrite your code so it doesn't use modules, so the restrictions imposed on module code by browsers don't apply.
    – Quentin
    Commented May 7, 2019 at 16:18
  • This worked for me, used express to serve my page statically.
    – Codigo Morsa
    Commented Jan 17, 2022 at 14:40
  • 5
    But browsers do allow access to those files via <script> without type="module". Why are modules any different?
    – dkniffin
    Commented Feb 21, 2023 at 21:40
  • 1
    @dkniffin I imagine it is just The Powers That Be adding in restrictions they would have added in the first place (if they knew back then, what they know now). So, type=module is subject to CORS, but ordinary script loading is not (to avoid breaking existing sites). This is a nice article on the matter: jakearchibald.com/2021/cors. (PS. Same with how video/audio avoid CORS, but fetching fonts requires it—the standard for video/audio was published before CORS became a standard, and then they couldn't enforce it on video/audio without breaking the web)
    – John Jordan
    Commented Sep 6, 2023 at 4:14
7

If you have node installed I would recommend installing http-server package. You'll be up and running in no time! Fixed my problem and I can run my application in chrome using the server.

Improve this answer
2
-2

I had the same, removed the type="module" and then the error was gone. Not sure why.

Improve this answer
3
  • 19
    If you remove type=“module” then the JS will throw an error when it hits import
    – Quentin
    Commented Dec 19, 2021 at 9:20
  • 3
    @Quentin how do you import (so ES6 code doesn't complain about missing class) and not get CORS ? I can <script src="../somefile.js"> and load just fine, but can't import the same file to get the classes in my main html script type="module" section
    – Alain Dumesny
    Commented Feb 20, 2022 at 9:05
  • It work form me in this case: stackoverflow.com/questions/77668054/…
    – piedramania
    Commented Dec 15, 2023 at 18:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.