對本地主機上的Neo4j數據庫的AJAX請求沒有「訪問控制 - 允許 - 來源」錯誤

Question

我正在編寫一個普通的JavaScrypt AJAX請求，從運行在localhost:8888上的MAMP服務器連接到運行在localhost:7474上的Neo4j數據庫。

我收到此錯誤：

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

繼答案類似的問題，我都試圖消除requeste頭，如...

// httpRequest.setRequestHeader("Content-type", "application/json") 

...但是，這沒有區別。我也研究過CORS，卻沒有找到解決辦法。

我可以對我的JavaScript做些什麼改變才能使它起作用？有沒有辦法讓我告訴開發機器上的Neo4j數據庫服務器接受來自同一臺機器的請求？

我的源代碼：

<button type="button">AJAX Request</button> 

<script type="text/javascript"> 
(function() { 
    var httpRequest 
    var restApiUrl = "http://neo4j:1234@localhost:7474/db/data/transaction/commit" 

    document.querySelector("button").onclick = function() { 
    makeRequest(restApiUrl) 
    } 

    function makeRequest(url) { 
    if (window.XMLHttpRequest) { // Mozilla, Safari, ... 
     httpRequest = new XMLHttpRequest() 
    } else if (window.ActiveXObject) { // IE 
     try { 
     httpRequest = new ActiveXObject("Msxml2.XMLHTTP") 
     } 
     catch (e) { 
     try { 
      httpRequest = new ActiveXObject("Microsoft.XMLHTTP") 
     } 
     catch (e) {} 
     } 
    } 

    if (!httpRequest) { 
     alert('Giving up :(Cannot create an XMLHTTP instance') 
     return false 
    } 

    var parameters = JSON.stringify({ 
    "statements" : [ { 
    "statement" : "CREATE (n {props}) RETURN n", 
    "parameters" : { 
     "props" : { 
     "name" : "My Node" 
     } 
    } 
    } ] 
}) 

    httpRequest.onreadystatechange = alertContents 
    httpRequest.open('POST', url, true) 
    httpRequest.setRequestHeader("Content-type", "application/json") 
    httpRequest.setRequestHeader("Accept", "application/json; charset=UTF-8") 
    httpRequest.send(parameters) 
    } 

    function alertContents() { 
    if (httpRequest.readyState === 4) { 
     if (httpRequest.status === 200) { 
     console.log(httpRequest.responseText) 
     } else { 
     alert('There was a problem with the request.') 
     } 
    } 
    } 
})() 
</script> 

---

編輯迴應@WilliamLyon

當我改變makeRequest方法使用jQuery的$.ajax方法（如下圖所示），我仍然得到同樣的錯誤，即使我使用contentType: "application/json"或dataType: 'json。

function makeRequest(url) { 
    var data = JSON.stringify({ 
    "statements" : [ { 
     "statement" : "CREATE (n {props}) RETURN n", 
     "parameters" : { 
     "props" : { 
      "name" : "My Node" 
     } 
     } 
    } ] 
    }) 

    $.ajax({ 
    url : url 
    , type: "POST" 
    , data : data 
    , contentType: "application/json" 
    , dataType: "json" 
    , success: function(data, textStatus, jqXHR) { 
     console.log(data, textStatus) 
    } 
    , error: function (jqXHR, textStatus, errorThrown) { 
     console.log(jqXHR, textStatus, errorThrown) 
    } 
    }) 
} 

Answer 1

由於端口號碼不同，所以出現此錯誤。 通常，如果服務器不支持跨域Ajax調用，則無法進行跨域調用。 雖然有方法。 您可以使用CORS或JSONP。

Answer 2

您正面臨着CORS問題。

會發生什麼情況？
默認情況下，您的瀏覽器不允許從其他域訪問資源（例如 - 通過AJAX）。這是爲了讓網絡更安全。

工作液

這裏是工作的解決方案（本地，我的機器上）：

$.ajax({ 
    url : "http://localhost:7474/db/data/transaction/commit", 
    type: "POST", 
    dataType: "json", 
    contentType : 'application/json', 
    data : JSON.stringify({ 
     "statements" : [ { 
     "statement" : "CREATE (n {props}) RETURN n", 
     "parameters" : { 
      "props" : { 
      "name" : "My Node" 
      } 
     } 
     } ] 
    }), 
    success: function(data, textStatus, jqXHR) { 
     console.log(data, textStatus) 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
     console.log(jqXHR, textStatus, errorThrown) 
    } 
}); 

值得注意的事項：

• 的dataType - 這一個設置，我們接受JSON作爲迴應
• 的contentType - 我們在請求

我使用的Neo4j 2.2.5本地使用JSON這個設置。該版本在響應中設置了「Access-Control-Allow-Origin」，所以應該沒有問題。您可以使用Chrome開發工具來驗證您的數據庫在發送響應中的響應。

實施例：

注：見 「響應標頭」 部分。