"access to script from origin 'null' has been blocked by CORS policy" error while trying to launch an html page using an imported js function

Asked 25/1, 2020 at 19:19 Answered 9/8, 2023 at 16:11

javascript html visual-studio-code import

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)

Kutenai answered 25/1, 2020 at 19:19 Comment(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 for example. You'll then be able to access your files using localhost – Cabala 25/1, 2020 at 19:30

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

Sipple answered 3/6, 2020 at 18:2 Comment(0)

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.

Odey answered 7/1, 2021 at 6:6 Comment(0)

type = "module" is usually used with webpack.
If you don't use webpack, you need to start a static service
u can use http-server -p 8003 start a service

Schaal answered 26/3, 2021 at 2:24 Comment(0)

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).

Kiln answered 8/5, 2021 at 18:2 Comment(0)

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

Availability answered 1/2, 2021 at 7:52 Comment(2)

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. – Haematozoon 1/11, 2021 at 16:4

This work, but the code inside the script must be Javscript node – Padgett 9/8, 2023 at 16:3

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

Padgett answered 9/8, 2023 at 16:11 Comment(0)

Recommended topics

Hot tags