How to enable cross-domain requests - No 'Access-Control-Allow-Origin' header....

Emml

unread,

Oct 25, 2015, 4:10:07 AM10/25/15

to d3-js

Hello,

I like to access data/file (json) from URLs probably on Amazon S3 or Google Storage or Github.

When i try as below:

d3.json("https://console.developers.google.com/m/cloudstorage/b/eatestbed1/o/flare.json", function(error, root) {

I get the error below:

XMLHttpRequest cannot load https://console.developers.google.com/m/cloudstorage/b/eatestbed1/o/flare.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Kindly help. Most solutions i have looked at request me to set header Access-Control-Allow-Origin: * on the server (s3/google storage/Github) which i don't have control over / know how to do.

Thank you.

Emml

Curran

unread,

Oct 25, 2015, 11:02:58 AM10/25/15

to d3-js

Hello,

Indeed, the first line of investigation would be to use CORS. But, as you say, you cannot change the server configuration. One way you can work around this is to use JS scripts and load them dynamically. Require.js can load AMD modules cross domain. Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>Data Loading Example</title>

</head>

<body>

var irisURL = 'http://curran.github.io/data/uci_ml/iris/iris.js';

require([irisURL], function(data){

d3.select("body").append("pre")

.text(JSON.stringify(data, null, 2));

});

</script>

</body>

</html>

Here's a live version in JSBin. The JS file is defined as an AMD module, and loaded dynamically using RequireJS. Here's what the data file looks like:

define([], function(){ return [{"Sepal Length":"5.1","Sepal Width":"3.5","Petal Length":"1.4", ...

Here's a script that will convert a CSV file into this AMD format.

Hope this helps.

Best regards,

Curran

Emml

unread,

Oct 26, 2015, 11:11:14 AM10/26/15

to d3-js

Thank you @Curran.

This works for the Iris dataset but for flare.json (https://storage.googleapis.com/eatestbed1/flare.json) i get the error:

"Uncaught SyntaxError: Unexpected token :"

Its probably complaining about the structure of flare.json file.

{

"name": "flare", //error on this line.

"children": [

{

"name": "analytics",

"children": [

{

"name": "cluster",

Regards,

Emml.

......

Reply all

Reply to author

Forward