I am getting the following error:
XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP.
I realize that this question has been answered before, but I still have not found a solution to my problem. I tried running chrome.exe --allow-file-access-from-files from the command prompt, and moved the file to the local file system, but I still get the same error.
I appreciate any suggestions!
If you are doing something like writing HTML and Javascript in a code editor on your personal computer, and testing the output in your browser, you will probably get error messages about Cross Origin Requests. Your browser will render HTML and run Javascript, jQuery, angularJs in your browser without needing a server set up. But many web browsers are programed to watch for cross site attacks, and will block requests. You don't want just anyone being able to read your hard drive from your web browser. You can create a fully functioning web page using Notepad++ that will run Javascript, and frameworks like jQuery and angularJs; and test everything just by using the Notepad++ menu item, RUN, LAUNCH IN FIREFOX. That's a nice, easy way to start creating a web page, but when you start creating anything more than layout, css and simple page navigation, you need a local server set up on your machine.
Here are some options that I use.
Test your web page locally on Firefox, then deploy to your host.
or: Run a local server
Test on Firefox, Deploy to Host
Firefox currently allows Cross Origin Requests from files served from your hard drive
Your web hosting site will allow requests to files in folders as configured by the manifest file
Run a Local Server
Run a server on your computer, like Apache or Python
Python isn't a server, but it will run a simple server
Run a Local Server with Python
Get your IP address:
On Windows: Open up the 'Command Prompt'. All Programs, Accessories, Command Prompt
I always run the Command Prompt as Administrator. Right click the Command Prompt menu item and look for Run As Administrator
Type the command: ipconfig and hit Enter.
Look for: IPv4 Address . . . . . . . . 12.123.123.00
There are websites that will also display your IP address
If you don't have Python, download and install it.
Using the 'Command Prompt' you must go to the folder where the files are that you want to serve as a webpage.
If you need to get back to the C:\ Root directory - type cd/
type cd Drive:\Folder\Folder\etc to get to the folder where your .Html file is (or php, etc)
Check the path. type: path at the command prompt. You must see the path to the folder where python is located. For example, if python is in C:\Python27, then you must see that address in the paths that are listed.
If the path to the Python directory is not in the path, you must set the path. type: help path and hit Enter. You will see help for path.
Type something like: path c:\python27 %path%
%path% keeps all your current paths. You don't want to wipe out all your current paths, just add a new path.
Create the new path FROM the folder where you want to serve the files.
Start the Python Server: Type: python -m SimpleHTTPServer port Where 'port' is the number of the port you want, for example python -m SimpleHTTPServer 1337
If you leave the port empty, it defaults to port 8000
If the Python server starts successfully, you will see a msg.
Run You Web Application Locally
Open a browser
In the address line type: http://your IP address:port
http://xxx.xxx.x.x:1337 or http://xx.xxx.xxx.xx:8000 for the default
If the server is working, you will see a list of your files in the browser
Click the file you want to serve, and it should display.
More advanced solutions
Install a code editor, web server, and other services that are integrated.
You can install Apache, PHP, Python, SQL, Debuggers etc. all separately on your machine, and then spend lots of time trying to figure out how to make them all work together, or look for a solution that combines all those things.
I like using XAMPP with NetBeans IDE. You can also install WAMP which provides a User Interface for managing and integrating Apache and other services.
Simple Solution
If you are working with pure html/js/css files.
Install this small server(link) app in chrome. Open the app and point the file location to your project directory.
Goto the url shown in the app.
Edit: Smarter solution using Gulp
Step 1: To install Gulp. Run following command in your terminal.
npm install gulp-cli -g
npm install gulp -D
Step 2: Inside your project directory create a file named gulpfile.js. Copy the following content inside it.
var gulp = require('gulp');
var bs = require('browser-sync').create();
gulp.task('serve', [], () => {
bs.init({
server: {
baseDir: "./",
},
port: 5000,
reloadOnRestart: true,
browser: "google chrome"
});
gulp.watch('./**/*', ['', bs.reload]);
});
Step 3: Install browser sync gulp plugin. Inside the same directory where gulpfile.js is present, run the following command
npm install browser-sync gulp --save-dev
Step 4: Start the server. Inside the same directory where gulpfile.js is present, run the following command
gulp serve
To add to Alan Wells's elaborate answer here is a quick fix
Run a Local Server
you can serve any folder in your computer with Serve
First, navigate using the command line into the folder you'd like to serve.
Then
npx i -g serve
serve
or if you'd like to test Serve without downloading it
npx serve
and that's it! You can view your files at http://localhost:5000
If you are using vscode, you can easily start a liver server. Click liver server at the bottom of the page, once the server is started, vscode will tell the port the project is running. Do ensure your project folder is the workspace
This error is happening because you are just opening html documents directly from the browser. To fix this you will need to serve your code from a webserver and access it on localhost. If you have Apache setup, use it to serve your files. Some IDE's have built in web servers, like JetBrains IDE's, Eclipse...
If you have Node.Js setup then you can use http-server. Just run npm install http-server -g and you will be able to use it in terminal like http-server C:\location\to\app.
Kirill Fuchs
If you use the WebStorm Javascript IDE, you can just open your project from WebStorm in your browser. WebStorm will automatically start a server and you won't get any of these errors anymore, because you are now accessing the files with the allowed/supported protocols (HTTP).
I was facing this error while I deployed my Web API project locally and I was calling API project only with this URL given below:
localhost//myAPIProject
Since the error message says it is not http:// then I changed the URL and put a prefix http as given below and the error was gone.
http://localhost//myAPIProject
Depends on your needs, but there is also a quick way to temporarily check your (dummy) JSON by saving your JSON on http://myjson.com. Copy the api link and paste that into your javascript code. Viola! When you want to deploy the codes, you must not forget to change that url in your codes!
I'm just learning d3, and I'm attempting to import data from a CSV file, but I keep getting the error "XMLHttpRequest cannot load file:///Users/Laura/Desktop/SampleECG.csv. Cross origin requests are only supported for HTTP. ". I've searched for how to fix this error and have ran it on a local web server, but I haven't found a solution that works for d3.v2.js. Here's a sample of the code:
var Time = []
ECG1 = []
d3.csv("/Desktop/d3Project/Sample.csv", function(data)
{
Time = data.map(function(d) {return [+d["Time"]];});
ECG1 = data.map(function(d) {return [+d["ECG1"]];});
console.log(Time)
console.log(ECG1)
});
Any help will be much appreciated.
This confused me too (I am also a d3 beginner).
So, for some reason, web browsers are not happy about you loading local data, probably for security reasons or something. Anyways, to get around this, you have to run a local web server. This is easy.
In your terminal, after cd-ing to your website's document root (thanks #daixtr), type:
python -m SimpleHTTPServer 8888 &
Okay, now as long as that terminal window is open and running, your local 8888 web server will be running.
So in my case, originally the web page I was working on was called
file://localhost/Users/hills/Desktop/website/visualizing-us-bls-data-inflation-and-prices.html
When I opened it in chrome. To open up my page on my local web server, I just typed (into the chrome search bar):
http://localhost:8888/Desktop/website/visualizing-us-bls-data-inflation-and-prices.html
Now, reading in CSVs should work. Weird, I know.
To those using built-in python webserver and who are still experiencing issues, do REMEMBER and make sure that you run the "python -m SimpleHTTPServer 8888" invocation at the correct path of which you consider to be your DocumentRoot. That is, you cannot just run 'python -m SimpleHTTPServer 8888' anywhere. You have to actually 'cd /to/correct/path/' containing your index.html or data.tsv and then from there run 'python -m SimpleHTTPServer 8888'.
Also, just learning D3 for school work. I was trying to run this simple D3 example:
https://gist.github.com/d3noob/b3ff6ae1c120eea654b5
I had the same problem as OP re: loading data using Chrome browser. I bet the great solution Hillary Sanders posted above was re: Python 2.X.
My answer is re: Python 3.X [OS: Ubuntu 16x]:
Open a terminal window within the root directory of your project, then run:
python3 -m http.server
It will serve HTTP on port 8000 by default unless it is already taken, in that case to open another port, e.g. 7800, run:
python3 -m http.server 7800
Then, on your Chrome browser address bar type:
localhost:8000
The above worked for me because I only had an index.html page in my root folder. In case, you have a HTML page with a different name, type the whole path to that local HTML page and it should work also. And, you should be able to see the graph created from the data set in my link (that must be in a folder like data/data.csv). I hope this helps. :-)
Use Firefox, idk what Chrome tries to accomplish
I have done quite a research of deploying an application over the local server that I have on my machine. Each source code for the Node JS application or the example that is available over the internet specifies to run the application from the console.
Is there any way that i can configure my MAMP server so that when i hit a URL the Node code specified is executed.
Are there any parameters to set for the same ?
I looking forward to the steps to achieve this as i was not able to found a relevant answer for the same as such.
I am trying to get this example to work. It works fine when I click the link. But when I try to download the HTML file on my local machine and try the same, it is throwing this error.
Not allowed to load local resource: blob:null/6771f68d-c4b8-49a1-8352-f2c277ddfbd4
The line of code that seems to be causing the issue is this,
video.src = window.URL.createObjectURL(mediaSource);
What this line of code is doing is basically trying to set the source of the video tag media element to the MediaSource object. I have tried various permutations without much luck.
I am using Chrome Version 28.0.1500.72 m, which is the latest stable release.
I would appreciate any pointers.
As #dandavis has said, "run it from http: not file".
I'm posting this as an answer for the sake of organization.
For starters:
Running you project from http means having a http server (such as apache or a simple node http-server) and running your project via http://localhost.
Install http-server globally using npm command(provided you have installed Node.js in your system beforehand). Navigate to your file folder in CMD and type http-server. Your app should run in localhost:8080.
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...