Question

尝试使用localhost在AJAX中查询图层时遇到了一些问题。这是代码：

var visitAPI = "http://mhclivemap.appsolutrends.net/api/visits?" +
                "start=" + startDate.value + "&end=" + endDate.value + 
                "&diagnosis=" + mhc_type_select.options[mhc_type_select.selectedIndex].value;

           var heatmapData = [];

           $.ajax({      
                url: visitAPI,
                dataType: "json",
                crossDomain:true,
                success: function (res) {
                    var result = res.visits;
                    var marker;

                    for (var i=0; i < result.length; i++) { // iterate thru each element in array
                        for (var j=0; j < result[i].count; j++) { // repeat for count in element
                            marker = new google.maps.LatLng(result[i].lat,result[i].lon);
                            heatmapData.push(marker);                           
                        }
                    };

                },
                error: function () {
                    alert('unable to load this layer, please try again later');
                }
            });

从这部分代码中，它返回一条错误消息：

XMLHttpRequest无法加载mhclivemap.appsolutrends.net/api/visits?start=2014-03-15&end=2014-04-15&diagnosis=GRP1。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许Origin localhost访问。

我想知道是什么导致了这个问题？是因为localhost吗？如果是这样，解决方案是什么？

提前致谢。

Answer 1

您发送请求的服务器必须在响应中返回正确的CORS标头，例如Access-Control-Allow-Origin，其值为通配符或等于您发出请求的域。显然，这不会发生在这里。您需要确保服务器支持CORS。如果是，您需要确保您的域名已注册。

Answer 2

XHR绑定到Same-Origin Policy。请求只能对生活在同一域中的资源进行。浏览器将阻止对外部域的请求。在您的情况下，您的操作为localhost，请求为mhclivemap.appsolutrends.net。两者都在不同的域上，浏览器会阻止它。

要从其他域请求，必须在外部域上配置Cross-Origin Resource Sharing。这是通过让它发送Access-Control-Allow-Origin标题来完成的。如果没有此配置，外部服务器将不允许您从中获取数据。

有关如何为不同服务器配置CORS，请参阅http://enable-cors.org/。

Answer 3

这是Xhr跨域访问问题。 Same origin policy是一种浏览器安全模型，用于防止跨域Xhr调用。（由http：// abc.com创建的Xhr无法向http：// sub.abc.com发出请求）

如果无法控制远程服务器，

服务器代理可能是解决此跨源访问问题的正确方法。这是一个简单的服务器代理示例（PHP）：

Proxy.php （应该与进行API调用的页面位于同一个原点）

<?php
  $url = $_GET['remoteUrl'];

  $ch = curl_init();
  $options = [
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_USERAGENT => "Google Bot",
    CURLOPT_FOLLOWLOCATION => true
  ];
  curl_setopt_array($ch, $options);
  $output = curl_exec($ch);
  curl_close($ch);

  header("Content-Type: application/json;charset: UTF-8");
  echo $output;
?>

<强> client.html

var visitAPI = "http://mhclivemap.appsolutrends.net/api/visits?" +
            "start=" + startDate.value + "&end=" + endDate.value + 
            "&diagnosis=" + mhc_type_select.options[mhc_type_select.selectedIndex].value;

$.ajax({
    url: "proxy.php?remoteUrl="+visitAPI,
    dataType: "json",
    success: function(response){
      console.log(response);
    }
});

如果您可以控制远程服务器响应，请尝试使用JSONP方法。

<强> RemoteServer.php

if(isset($_GET['callback'])){
    //set response content-type header in application/javascript
    header("Content-Type: application/javascript");
    //wrap response with a function call, if client try to fetch cross-origin data in jsonp way
    echo $_GET['callback']."(".$response.")";
}else{
    header("Content-Type: application/json");
    echo $response;
}

<强> client.html

var visitAPI = "http://mhclivemap.appsolutrends.net/api/visits?" +
            "start=" + startDate.value + "&end=" + endDate.value + 
            "&diagnosis=" + mhc_type_select.options[mhc_type_select.selectedIndex].value;

$.ajax({
  url: visitAPI,
  dataType:"jsonp",
  success: function(response){
    console.log(response);
  },
  error: function(response){

  }
});

这个API也采用相同的策略来确定它应该返回什么类型的响应。

In JSON format

In JSONP format

使用localhost时没有'Access-Control-Allow-Origin'标头

3 个答案: