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
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.
I'm playing around with three.js locally with a single HTML page, and I want to play around with loading and moving around 3D object files. From sample code I have the following copied:
var loader = new THREE.AMFLoader();
loader.load( './models/rook.amf', function ( amfobject ) { //'./models/rook.amf'
scene.add( amfobject );
render();
} );
And in Chrome I get the following error:
Access to XMLHttpRequest at 'file:///C:/Users/me/Desktop/project/models/rook.amf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
What's a simple and safe way I can get around this and get back to learning threejs? Can I add some sort of permission code somewhere? Upload my 3D model somewhere and load from an http location (and if so, where could I do this easily and free)?
There are two ways to solve this:
1.Change security for local files in a browser. For chrome, this can be done by searching for the path of your Chrome executable and then, on your cmd :
> "C:\PathTo\Chrome.exe" --allow-file-access-from-files
2.Run files from a local web server. This allows you to access your page as:
http://localhost/yourFile.html
You can get more information to Run a local server here
Instead of directly giving the file path, you can serve your html file with simple server: https://www.npmjs.com/package/http-server.
Open a terminal:
cd ./Users/me/Desktop/project/
npm install --global http-server
http-server -p 4200
This will serve index.html file at http://localhost:4200/ on your default browser.
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.