javascript - 对本地主机上的 Neo4j 数据库进行 AJAX 请求时没有 'Access-Control-Allow-Origin' 错误

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.

根据类似问题的答案，我尝试删除请求 header ，例如...

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

您面临的是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 - 这设置我们在请求中使用 JSON

我在本地使用 Neo4j 2.2.5。这个版本响应设置了“Access-Control-Allow-Origin”，所以应该没有问题。您可以使用 Chrome 开发工具验证数据库发送的响应内容。

示例:

注意:请参阅“响应 header ”部分。