16

I got this error while trying to launch an html page using a javascript file which imported a function from another file:

Access to script at 'file:///C:/Users/bla/Desktop/stuff/practice/jsPractice/funcexecute.js' 
from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Failed to load resource: net::ERR_FAILED

Here's the html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

</head>
<body>
    <script type = 'module' src='funcexecute.js'></script>

</body>
</html>

js file which was called from the html: (funcexecute.js)

import sumup from '/funcfile.js';
console.log(sumup(1,2));

Imported module: (funcfile.js)

function sumup(num1, num2){
    return num1+num2;
}
export default sumup;

How can i fix this? (im using vscode)

noon
  • 161
  • 1
  • 1
  • 3
  • 1
    Your files need to be served with http or https protocol, not `file:///`. Either use a remote server, or set up a local one, it's easy these days, with NodeJS and [Express](https://expressjs.com/) for example. You'll then be able to access your files using `localhost` – blex Jan 25 '20 at 19:30

6 Answers6

36

You cannot use a script file as a module without using a server. Take a look here

Here are some of the options

  • Use Live Server (Extension for VS Code)
  • Use http-server module from node (install via npm then run http-server . from your project directory)
  • use http.server package from python
  • use a wamp (or lamp) server

In short cannot use type="module" with file protocol

HARDY8118
  • 622
  • 7
  • 15
5

Right click the index.html file in Visual Studio Code, select Open with Live Server.
This will fix your issue.

Exports/Imports in JS only work on servers, they DO NOT work on local machines (there is a different code for that).

I have created a step by step video on my YouTube channel.

Ian Campbell
  • 23,484
  • 14
  • 36
  • 57
fruitloaf
  • 1,628
  • 15
  • 10
1

  1. type = "module" is usually used with webpack.

  2. If you don't use webpack, you need to start a static service

  3. u can use http-server -p 8003 start a service

ifredom
  • 979
  • 9
  • 6
1

The issue is caused because the file is being opened directly; so there seemed to be a couple of ways around this: one is to disable the security in Chrome, although try as I might, I couldn’t manage to get it to give up the ghost: I tried various combinations around the –disable-web-security flag of Chrome.

The second option is to host the site locally. For a brief moment I considered using something like IIS Express; but fortunately, I came across this tool that hosts a site locally for you.

It can be installed as an npm package: npm install --global http-server Once installed, you just navigate to the relevant directory, and type http-server:

C:\repos\webanimations\animated-columns-optimised>http-server
Starting up http-server, serving ./
Available on:
  http://192.168.1.79:8080
  http://127.0.0.1:8080
  http://172.17.230.225:8080
Hit CTRL-C to stop the server

You can then navigate to your specific page; for example:

http://127.0.0.1:8080/columns

And no more CORS error (doesn’t quite work yet, but that’s a whole different story).

Amrit Kanoi
  • 51
  • 4
0

Replace type="module" with type="JavaScript" in your script link.

Adam
  • 3,829
  • 1
  • 21
  • 31
Manju G B
  • 11
  • 1
  • This doesn't work. It fix the error but not the issue. Still javascript file will not be loaded to the browser. If you use type = "module" you have to open it on a server. – Sapthaka Nov 01 '21 at 16:04
  • This work, but the code inside the script must be Javscript node – quine9997 Aug 09 '23 at 16:03
0

If you use the right/fit javascript code it works.

This is an example with react client rendering

paths
/0_0_important_example005/index.html
/0_0_important_example005/Greeting.js
/0_0_important_example005/Greeting2.js

0_0_important_example005/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="reactcontainer"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="Greeting.js"></script>
    <script src="Greeting2.js"></script>

    
  </body>
</html>

/0_0_important_example005/Greeting.js

const createElement = React.createElement;


function Greeting({ name }) {
    
    
    
  return createElement(
    'h1',
    { className: 'greeting' },
    ['Hello1 ',
    createElement('i', null, name),
    '. Welcome!',
    createElement(Greeting2, { name: 'Taylor2' })]
  );
}



const domContainer = document.querySelector('#reactcontainer');
const root = ReactDOM.createRoot(domContainer);
root.render(createElement(Greeting, { name: 'Taylor' }));



function Greeting2({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello2 ',
    createElement('i', null, name),
    '. Welcome!'
  );
}
quine9997
  • 685
  • 7
  • 13