xmlhttp request cannot load the file - javascript

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.

Related

Cross origin in JavaScript import module

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.

Threejs Model Loading: "Access to XMLHttpRequest .. from origin 'null' has been blocked by CORS policy" - How to Test Locally? Or Simple Upload?

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.

How to load VRML models (wrl) with three.js

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 .

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

I'm facing this issue with chrome and IE. I have developed HTML player in that i used XML to load the data inside that player. all pages have been accessed through XML.it work fine when I use any server to load that data inside player.I use WAMP server now. But now I'm thinking about making it as an offline version and write it inside CD. but when I open my player.html file directly without having server, the XML data not going to load.it showing following error in the console.
XMLHttpRequest cannot load file:///C:/wamp/www/TTT_BR/english.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
you must run your app in the server , use node js
1- Install NodeJS // Hint: If you're on a Mac, you want to install and use Homebrew for this
2- Open your favorite terminal emulator
2- Install http-server by running: npm install http-server -g
3- Start http-server by running: http-server 'path/to/your/angular/root/directory' -o
That last command — specifically, the -o flag — should open a browser window at: localhost:8080
OR// use cd to find your directory app
and use this command : http-server . -o
"." mean your current directory
you can see : https://teamtreehouse.com/community/i-am-not-able-to-load-my-json-file
for testing/development purposes, the simplest solution is to use firefox browser.
Pretty much everyone has python on mac/linux by default. Who doesent, can easily get it.
python -m SimpleHTTPServer
will give you a local server # http://localhost:8000.
From there you can access whatever file you'd like for your app.
Note: use python -m http.server for python versions 3.0+
Or you can run a web server like Apache and MySQL in XAMPP Control Panel. Put your file folder inside /htdocs inside /xampp folder and run your code in the browser using localhost.

D3.js: Treemap doesn't load from JSON file

I am trying to run this very example of a treemap on localhost, but I can't load the JSON file (which, by the way, is the same JSON file that the example uses).
The console returns the next error in Google Chrome:
XMLHttpRequest cannot load file:///C:/Users/Usuario/Downloads/d3/flare.json. Cross origin requests are only supported for HTTP.
The JSON file is in the same folder as the html file.
Thanks in advance for your help.
You cannot load local files because of the security policy. To quote the D3 website:
When developing locally, note that your browser may enforce strict permissions for reading files out of the local file system. If you use d3.xhr locally (including d3.json et al.), you must have a local web server. For example, you can run Python's built-in server:
python -m SimpleHTTPServer 8888 &
or for Python 3+
python -m http.server 8888 &
Once this is running, go to http://127.0.0.1:8888/.
If people working d3.js on the xampp or wamp they can run their html file as like php file by starting the server.
I found the same issue then I started the wampp server then the file get loaded successfully without any issue like "XmlHttpRequest Access control allow orgin".
I am working in WAMP. I hope same thing for XAMPP, but I am not sure...

Categories