使用本地主机时没有'Access-Control-Allow-Origin'标头

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.appsoluterends.net/api/views？开始=2014-03-15&end=2014-04-15&diagnosis=GRP1。请求的资源上不存在"Access Control Allow Origin"标头。因此，不允许访问原始localhost。

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

提前谢谢。

Answer 1

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

Answer 2

XHR绑定到同源策略。只能对生活在同一域中的资源进行请求。对外部域的请求将被浏览器阻止。在您的情况下，您以localhost的身份运行，请求是mhclivemap.appsolutrends.net。两者都在不同的域上，浏览器会阻止它。

若要从另一个域请求，必须在外部域上配置跨源资源共享。这是通过让它发送Access-Control-Allow-Origin报头来完成的。如果没有这种配置，外部服务器将不允许您从中获取数据

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

Answer 3

这是一个Xhr跨源访问问题。同源策略是一种浏览器安全模型，用于防止跨域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也采用相同的策略来确定它应该返回什么类型的响应。

JSON格式

在JSONP格式