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.
Related
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.
I am trying to load a VRML model with three.js, but it seems my code does not work properly, and I cannot display the 3D model on a web page. Is there something wrong in my code?
var loader = new THREE.VRMLLoader();
loader.load('./Bluegg/Bluegg/Bluegg.wrl', function(object){
alert(object);
scene.add(object);
});
and the error message says
Failed to load file:///C:/Users/ninom/Desktop/takahiro_note/3DJS/Bluegg/Bluegg/Bluegg.wrl: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
What does this message mean? Thank you for taking your time.
From the documentation section on how to run things locally -
If you load models or textures from external files, due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception.
If your page is using a file:// URL, then it is loading from the file system as described above. To fix this, you'll need to run a local server. There are plenty of quick ways to do that mentioned in the docs. One that I like, with Node.js v6+ installed, is:
# first time only
npm install -g serve
# start a local server "hosting" the current directory
serve .
I am trying to integrate npm's application insights module (https://www.npmjs.com/package/applicationinsights) into my React js application.
My source for doing this is:
import appInsights from 'applicationinsights';
appInsights.setup(applicationInsightsKey).start();
The problem I got is that in my Chrome Developer tools I can see a preflight request made to https://dc.services.visualstudio.com/v2/track.
But in the console I can see the following error:
"Fetch API cannot load https://dc.services.visualstudio.com/v2/track.
Request header field content-encoding is not allowed by
Access-Control-Allow-Headers in preflight response."
Do you have an idea how can I fix this issue?
The node.js module you are using is the AI SDK for Node.js server. And As the React js applications are client applications in javascript, technically they are different.
Please try to use ApplicationInsights-JS.
Additionally, you can refer to https://azure.microsoft.com/en-us/documentation/articles/app-insights-web-track-usage/ for more info.