CORS issue on noe4j with D3.js

Question

I am working on Neo4j and D3.js libraries. I need to show the neo4j graph using d3.js on my simple html page. I am following this tutorial.

Here is my code :

<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script type="text/javascript">
        function post_cypherquery() {
            // while busy, show we're doing something in the messageArea.
            $('#messageArea').html('<h3>(loading)</h3>');

            // get the data from neo4j
            $.ajax({
                url: "http://localhost:7474/db/data/transaction/commit",
                type: 'POST',
                data: JSON.stringify({ "statements": [{ "statement": $('#cypher-in').val() }] }),                
                //dataType:"json",
                accept: 'application/json; charset=UTF-8',
                success: function () { },
                error: function (jqXHR, textStatus, errorThrown) { $('#messageArea').html('<h3>' + textStatus + ' : ' + errorThrown + '</h3>') },
                complete: function () { }
            }).then(function (data) {

                $('#outputArea').html("<p>Query: '"+ $('#cypher-in').val() +"'</p>");
                $('#messageArea').html('');

                var d3_data = [];
                $.each(data.results[0].data, function (k, v) { d3_data.push(v.row); });

                var margin = { top: 40, right: 200, bottom: 40, left: 40 },
                    width = ($(window).width()/2) - margin.left - margin.right,
                    height = ($(window).height()/2) - margin.top - margin.bottom, 
                    barHeight = height / d3_data.length;

                var maxrange = d3.max(d3_data, function (d) { return d[1]; }) + 3;

                var scale_x = d3.scale.linear()
                    .domain([0, maxrange])
                    .rangeRound([0, width]);

                var scale_y = d3.scale.linear()
                    .domain([d3_data.length, 0])
                    .rangeRound([0, height]);
                 var xAxis = d3.svg.axis()
                    .scale(scale_x)
                    .ticks(maxrange)
                    .orient("bottom");

                var yAxis = d3.svg.axis()
                    .scale(scale_y)
                    .ticks(d3_data.length)
                    .orient("left");   

                var chart = d3.select("#outputArea")
                    .append("svg")
                    .attr("width", (width + margin.left + margin.right) + "px")
                    .attr("height", (height + margin.top + margin.bottom) + "px")
                    .attr("version", "1.1") 
                    .attr("preserveAspectRatio", "xMidYMid")
                    .attr("xmlns", "http://www.w3.org/2000/svg");

                chart.append("title")
                    .text("Number of players per movie");

                chart.append("desc")
                    .text("This SVG is a demonstration of the power of Neo4j combined with d3.js.");

                chart = chart.append("g")
                    .attr("transform", "translate(" + (+margin.left) + "," + (+margin.top) + ")");

                chart.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (+height) + ")")
                    .call(xAxis);

                chart.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (-1) + ",0)")
                    .call(yAxis);

                var bar = chart.selectAll("g.bar")
                    .data(d3_data)
                    .enter().append("g").attr("class","bar")
                    .attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; });

                bar.append("rect")
                    .attr("width", function (d) { return scale_x(d[1]) + "px"; }) 
                    .attr("height", (barHeight - 1) + "px" );

                bar.append("text")
                    .attr("class", "info")
                    .attr("x", function (d) { return (scale_x(d[1]) - 3) + "px"; })
                    .attr("y", (barHeight / 2) + "px")
                    .attr("dy", ".35em")
                    .text(function (d) { return 'players: ' + d[1]; });

                bar.append("text")
                    .attr("class","movie")
                    .attr("x", function (d) { return (scale_x(d[1]) + 3) + "px"; })
                    .attr("y", (barHeight / 2) + "px")
                    .attr("dy", ".35em")
                    .text(function (d) { return d[0]; });
            });
        };
    </script>

    <h1>Cypher-test</h1>
<p>
<div id="messageArea"></div>
<p>
<table>
  <tr>
    <td><input name="cypher" id="cypher-in" value="MATCH (n1)-[r]->(n2) RETURN r, n1, n2 LIMIT 25" /></td>
    <td><button name="post cypher" onclick="post_cypherquery();">execute</button></td>
  </tr>
</table>
<p>
<div id="outputArea"></div>
<p>

</body>
</html>

When I run this code its gives me CORS error:

XMLHttpRequest cannot load http://localhost:7474/db/data/transaction/commit. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.

I have googled but nothing find useful. I think I have to give some authentication but where and how ? Dont mark this as duplicate just give me a little hint. Thanks

Possible duplicate of ["No 'Access-Control-Allow-Origin' header is present on the requested resource"](https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) — Liam, Aug 02 '17 at 08:14
I have added `dataType:"jsonp"` is my request and now it gives me this error ` GET http://localhost:7474/db/data/transaction/commit?callback=jQuery32105687596…1)-[r]-%3E(n2)%20RETURN%20r,%20n1,%20n2%20LIMIT%2025%22}]}&_=1501661756999` — Noob Player, Aug 02 '17 at 08:17
This is still valid I think : https://stackoverflow.com/questions/28699708/how-to-use-transactional-cypher-http-endpoint-and-new-rest-api-authentication-an — Tom Geudens, Aug 02 '17 at 08:20
You are doing an XMLHttpRequest to a different domain than your page is on and this domain is not returning a `Access-Control-Allow-Origin` header. Either use the same domain or configure the target to return the correct HTTP headers — Liam, Aug 02 '17 at 08:24

Akhilendra · Answer 1 · 2017-08-02T08:37:36.723

1

Install this extension on your google chrome browser.And enable it. Hope it will fix your problem.

edited Aug 02 '17 at 08:37

answered Aug 02 '17 at 08:34

Akhilendra

1,137
1
16
31

I was facing same issue few days ago, This plugin make it solved . Clear browser cache/cookie once. Good Luck. – Akhilendra Aug 02 '17 at 08:40
1

Faced the same issue with d3.v4 on my local dev env and this extension fixed the issue. – Andrei Poehlmann May 18 '18 at 14:40

score 1 · Answer 2 · answered Mar 14 '21 at 19:00

I have been getting this error and my chrome CORS extension is not working due to some reasons. Easiest and secured way to do is to do the folowing.

Install a simple node server. Eg. http-server or live-server using npm.

Open cmd in the working directory and start the server. So you will have the directory in your server and all the files in your working directory can be accessed without blocked by CORs. This is the simplest and and safest way to access files for development for me as I was beginner in D3.

CORS issue on noe4j with D3.js

2 Answers2