CODEWITHSUNDEEP
javascripthtmlvisual-studio-codeimport
noon
noon

Reputation: 231

"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

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)

Upvotes: 23

Views: 75045

Answers (6)

quine9997
quine9997

Reputation: 834

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

Upvotes: 0

fruitloaf
fruitloaf

Reputation: 2930

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.

Upvotes: 8

Amrit Kanoi
Amrit Kanoi

Reputation: 51

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

Upvotes: 1

ifredom
ifredom

Reputation: 1090

  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

Upvotes: 1

Manju G B
Manju G B

Reputation: 11

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

Upvotes: 0

HARDY8118
HARDY8118

Reputation: 712

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

Upvotes: 43

Related Questions