noe4j與D3.js的CORS問題

我正在Neo4j和D3.js庫上工作。我需要在簡單的html頁面上使用d3.js顯示neo4j圖形。我正在關注這個tutorial。noe4j與D3.js的CORS問題

這裏是我的代碼：

<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>

當我運行這段代碼它給我CORS錯誤：

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.

我用Google搜索，但沒有發現有用的。我想我必須提供一些認證，但是在哪裏以及如何？不要將其標記爲重複只是給我一點提示。謝謝

來源

2017-08-02 Noob Player

的可能的複製[「否‘訪問控制允許來源’標題存在於所請求的資源」]（https://stackoverflow.com/questions/20035101/no-access-control -allow-origin-header-is-present-on-the-requested-resources） – Liam

我添加了'dataType：「jsonp」'是我的請求，現在它給了我這個錯誤'GET http：// localhost：7474/db/data/transaction/commit？callback = jQuery32105687596 ... 1） - [r] - ％3E（n2）％20RETURN％20r，％20n1，％20n2％20LIMIT％2025％22}]}＆_ = 1501661756999' –

這是仍然有效我認爲：https://stackoverflow.com/questions/28699708/how-to-use-transactional-cypher-http-endpoint-and-new-rest-api-authentication-an –

在您的谷歌Chrome瀏覽器上安裝this extension並啓用它。希望它能解決你的問題。

來源

2017-08-02 08:34:15

是的，已經做到了 –

我前幾天面對同樣的問題，這個插件讓它解決了。清除瀏覽器緩存/ cookie一次。祝你好運。 –

noe4j與D3.js的CORS問題

回答

相關問題