"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
Question
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)
5 answers
solution1
11 2020-06-03 18:02:18
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
solution2
1 2021-01-07 06:06:03
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).
Here is how to do it, step by step instructions .
solution3
1 2021-03-26 02:24:33
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 8003start a service
solution4
1 2021-05-08 18:02:50
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).
solution5
0 2021-02-01 07:52:45
将脚本链接中的type="module"替换为type="JavaScript" 。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.