when i tried to import a class from one js file to another i got this error
Uncaught SyntaxError: Cannot use import statement outside a module
when i added type="module" to my script tags i got this error
Access to script at 'file link' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
any help on how to fix the error ?
this was simply solved by adding type="module" to my script tags and serving my web files from an HTTP server running on localhost instead of opening the html file directly
these answers were helpful :
How to run html file on localhost?
First off, you have to include the type="module" attribute in your script tag.
Secondly, when using the import statement, don't leave out the file extension, in this case .js.
e.g: import { sqrRoot } from "./math_function.js"
Just run your application by using your http server. Do not access it directly.
Related
I'm using Cordova to make a cross-platform app. My method so far has been to first make something work on my PC (since debugging is easy in google chrome) and then test it on my phone.
I need to import the module 'axios' that I installed with npm. The index.html includes the javascript file: js/index.js. Inside this file I tried loading the module by writing:
import axios from 'axios';
However, this gives me the error "Uncaught SyntaxError: Cannot use import statement outside a module". I then tried importing the module from index.html:
<script type="module" src="../node_modules/axios/index.js"></script>
But it then throws a security error:
Access to script at '<path-to-app-root>/node_modules/axios/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
When I google the error I find workarounds (that I also cannot get to work). But I feel it shouldn't be this hard since I'm working with a well-known framework. For example, I tried the method used here but once again I get a security error.
I'm at a loss here. Should I use a complex workaround from the internet or am I missing the regular/easy way?
You cannot use Node with Cordova. Node.JS is a back end environment.
This question already has an answer here:
Importing script with type=module from local folder causes a CORS issue
(1 answer)
Closed 1 year ago.
I have a simple html file:
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
</head>
<script type="module">
import init from './target/test.js'
init()
</script>
</html>
And in the target folder a test.js file:
function init() {
console.log("It works");
}
export default init;
But when I open the html file with firefox I get the following errors in the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/wanne/Bureaublad/hmm/target/test.js. (Reason: CORS request not http).
Module source URI is not allowed in this document: “file:///C:/Users/wanne/Bureaublad/hmm/target/test.js”.
According to this article, running modules require a HTTP(s) connection and will not work locally:
If you try to open a web-page locally, via file:// protocol, you’ll
find that import/export directives don’t work. Use a local web-server,
such as static-server or use the “live server” capability of your
editor, such as VS Code Live Server Extension to test modules.
So I'd suggest exactly that and instead of running it locally, use a live server extension from your preferred text editor.
I have an index.html file that connect to file called main.js.
I try to import another js file into the main.js using import, but always get the following error:
Access to script at 'file:///C:/...js/main.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.
I tried to open a server but it didn't solve the problem. I don't know if the problem is in my html file or js files and I really need your help.
My code goes like this:
index.html
<body>
<script type="module" src='./js/main.js'></script>
</body>
main.js
import {
double
} from './utils.js';
utils.js
export function double(n) {
return n * 2;
}
You've probably fixed the problem by now, but for anyone googling in the future, here's the solution.
The error message says that you can't access the file from origin "null", and states that you can only do these requests with certain protocol schemes. The protocol scheme that local files on your computer have is "file://", and I think the origin: "null" thing is about it not being on a website (e.g. http://a.com vs file://a/b/c).
What you need to do to fix this is start a local server. The easiest approach is to use this python one-liner. If you are on MacOSX or Linux, go ahead and use the below command:
$ cd path/to/website
$ python -m SimpleHTTPServer 8080
Serving HTTP on 0.0.0.0 port 8000 ...
If you are on Windows, you need to install Python before making the server. To do so, go to the downloads page on their website and download the latest version. To check if it is installed, run this in the command prompt:
python -V
If you get something like Python 3.9.5, you can go ahead and run the command mentioned before.
Once you have got the server started, just navigate to http://localhost:8080/ in your browser.
This question already has answers here:
Access to Image from origin 'null' has been blocked by CORS policy
(11 answers)
Closed 2 years ago.
catalog
- folder
- index.html
- index.js
- index1.js
index.html
<!-- main content --->
<script type='module' src='./index.js'></script>
index.js
import {show} from "./index1"
show();
index1.js
export default function show(){
console.log('hello world');
}
descripttion
when run index.html on browser, is don't work, and i got this error:
Access to script at 'file:///Users/xxx/Documents/code/canvas/test/index.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.
it may work with server, how to make it work without server, moulti-module.
import a module from other. just like run with nodejs env.
Importing a script as a module: File should export as module.exports
Please refer to the below link for working example:
https://stackblitz.com/edit/js-mgwfrd
am getting the following error please help mejavascript ,
angular.min.js:103 XMLHttpRequest cannot load file:///C:/Users/DELL/Documents/jmyangularjsprojects/myangularjsprojects/login.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) # angular.min.js:103
I believe you are trying to run your application from your local file system, rather than using a web server. My first recommendation for you is to host the files on a web server.
If you are using Chrome, it won't let you do cross origin requests, you cannot load file:/// and instead you need to use http:// protocol at all times.
Use this workaround for chrome as a temporary fix.
Find the path where you installed Chrome and do
> "C:\PathTo\Chrome.exe" --allow-file-access-from-files
XMLHttpRequest can not load file means you can not parse an external data file (ex csv file). This is for security reason inside Chrome. However, to be able to download your data using d3.csv, you must follow the following steps:
Open you anaconda command window (Anaconda Prompt) (test Python is working)
Go to the directory where is your html file (cd xxx/xxx/xxx/index.html)
Run the following command: python -m http.server (in Python 3)
You will see: Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/).
Open a Chrome: http://localhost:8000
Then execute Ctrl + Shift I to open the development window, then click on Console to see your csv data.
This will solve your problem. Hope this will help.