Menu
When I am running the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Demo: GeoJSON</title>
<script type="text/javascript" src="http://localhost/webserver/d3/d3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Define default path generator
var path = d3.geo.path();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("http://localhost/webserver/us-states.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
</html>
I get the following error:
XMLHttpRequest cannot load http://localhost/webserver/us-states.json. Origin null is not allowed by Access-Control-Allow-Origin.
What is going wrong here and how do I solve it? I am following the book of Scott Murray and I didn't have problems to access files so far on my webserver until I started with json.
368
For security reasons, browsers blocks Ajax HTTP requests (XHR) from different hosts (origins).
The d3.json("...") function makes an Ajax request to your http://localhost/... and you are probably serving the HTML from a different host.
Are you opening the .html as file in the browser? Thats considered a different host. You have some options there:
var mygeodata = {your json here} to the file and adding <script type="text/javascript" src="http://localhost/webserver/us-states.js"></script> in the HTML <head> while also removing the d3.json("...") part. After that you have a global variable with your data in mygeodata
If you are studying/prototype (by the looks of it) I would go with the second approach.
193
Very late to the party, but for anyone still having issues, it is really easy to set up an http-server instance with NPM from the directory containing all of your files you want to server.
You would just install http-server globally npm i http-server -g, then run the http-server from your root directory.
Once the server is running, go to your browser and input the relative path prefixed with localhost:[port][/path/to/file]. Port will be printed out from the command line when you run the http-server for the first time within your repo/directory, and the relative path starts with the directory you ran the http-server. This will properly serve files to the end user, without just copy and pasting a link to the literal local.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
