當使用localhost時沒有'Access-Control-Allow-Origin'標頭

我在使用localhost試圖在AJAX中查詢圖層時遇到了一些問題。下面是代碼：當使用localhost時沒有'Access-Control-Allow-Origin'標頭

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」標題。因此，不允許訪問源localhost。

我想知道是什麼導致了這個問題？是因爲本地主機嗎？如果是這樣，解決方案是什麼？

在此先感謝。

來源

2014-04-15 20 Cents

對我來說，答案是一個活的測試服務器。很確定AJAX要求內容來自同一個域。 –

您確定該服務首先允許跨域呼叫嗎？ –

@JohnSmith但是有沒有其他方法來執行此操作？也許像切換URL標頭？ –

您發送請求的服務器必須在響應中返回適當的CORS頭，例如Access-Control-Allow-Origin，其值可以是通配符或等於您發出請求的域。顯然，這不是在這裏發生的。您需要確保服務器支持CORS。如果是這樣，您需要確保您的域名已註冊。

來源

2014-04-15 02:23:58

有沒有其他方法可以通過對代碼做一些技巧來實現這一點？ –

您有3個選項：1.）通過您控制的域上的服務器或您的控件與發出請求的頁面位於相同源的域的服務器代理跨域請求。 2.）確保CORS在遠程服務器上正確實施。 3.）使用JSONP（僅限GET），但遠程服務器必須再次參與。總之，必須有一些服務器的參與來完成這項工作。 –

XHR綁定到Same-Origin Policy。只能對生活在同一個域中的資源進行請求。對外部域的請求將被瀏覽器阻止。在你的情況下，你的經營範圍是localhost，請求是mhclivemap.appsolutrends.net。兩者都位於不同的域中，瀏覽器會阻止它。

要從另一個域請求，Cross-Origin Resource Sharing必須在外部域上配置。這是通過發送Access-Control-Allow-Origin標題完成的。如果沒有這種配置，外部服務器將不允許您從中獲取數據。關於如何爲不同服務器配置CORS，請參閱http://enable-cors.org/。

來源

2014-04-15 02:32:14 Joseph

那麼我應該做的是配置服務器？有什麼辦法通過在代碼上做一些技巧來實現這一點？ –

這是一個Xhr的跨源訪問問題。 Same origin policy是防止跨域Xhr呼叫的瀏覽器安全模型。（它通過HTTP創建XHR：// abc.com無法對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; 
}

客戶端。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

來源

2014-04-15 06:01:34 Chickenrice

當使用localhost時沒有'Access-Control-Allow-Origin'標頭

回答

相關問題