对于localhost上的Neo4j数据库的AJAX请求没有“Access-Control-Allow-Origin”错误

Question

我正在编写一个普通的JavaScrypt AJAX请求，用于从localhost:8888上运行的MAMP服务器连接到localhost:7474上运行的Neo4j数据库。

我收到此错误：

  

XMLHttpRequest无法加载   http://localhost:7474/db/data/transaction/commit。没有   请求中存在“Access-Control-Allow-Origin”标头   资源。因此不允许来源“http://localhost:8888”   访问。响应的HTTP状态代码为401。

在回答类似问题之后，我尝试删除了请求标头，例如......

// 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 devtools验证您的数据库在响应中的响应情况。

示例：

注意：请参阅“响应标头”部分。

Answer 2

您收到该错误，因为端口号不同。 通常，如果服务器不支持跨域Ajax调用，则无法进行跨域调用。 虽然有各种各样的方法。 您可以使用CORS或JSONP。