2014-10-02 129 views
0

我正在使用flurry API來接收json數據。所以我不得不多次調用url來接收數據。但除了第一個請求,所有其他請求給這個錯誤Jquery ajax請求亂碼給出錯誤跨源請求被阻止

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 

我創建jfiddle這一點。在那裏你可以看到相同的錯誤。

這裏是我使用收到的數據

function($) { 
    var url = 'http://api.flurry.com/appMetrics/ActiveUsersByMonth?apiAccessCode=DXGSYSYBSK26BZNSJB2X&apiKey=Removed&startDate=2012-01-01&endDate=2012-12-30&country=LK&versionName=1.0&groupBy=MONTHS'; 

    $.ajax({ 
     type: 'GET', 
     url: url, 
     crossDomain: true, 
     dataType: 'json', 
     success: function(json) { 
      console.dir(json); 
      alert(); 
     }, 
     error: function(e) { 
      console.log(e.message); 
     } 
    }).done(function(data) { 

     var activeUsers = []; 

     $.each(data.day, function(i, item) { 
      var arr = $.map(item, function(el) { return el; }); 
      activeUsers.push(arr[1]); 
     }); 

     var barChartData = { 
      labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], 
      datasets : [ 
       { 
        fillColor : "rgba(220,220,220,0.5)", 
        strokeColor : "rgba(220,220,220,0.8)", 
        highlightFill: "rgba(220,220,220,0.75)", 
        highlightStroke: "rgba(220,220,220,1)", 
        data : activeUsers 
       } 
      ] 

     } 
     var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData, { 
      responsive : true 
     }); 

    }); 
})(jQuery); 

http://jsfiddle.net/hydride/hv3xrjwL/

+1

你試過數據類型: 'JSON' 到數據類型: 'JSONP', – 2014-10-02 02:19:52

+0

是。沒有工作。我認爲jsonp不支持毛茸茸的api – Dushan 2014-10-02 02:21:29

+1

然後使用PHP來請求服務並使用它來編碼成json。然後,您可以在Javascript中使用ajax訪問該json。 – 2014-10-02 02:26:18

回答

1

謝謝你的提示@Human愛的代碼。以這種方式實現我想要的。將我的flurry url移動到php並從那裏請求服務。然後將結果編碼爲json。如果你沒有正確設置標題,它會給出相同的錯誤。

服務器端代碼:

header('Content-type: application/json'); 
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); 
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With'); 
header('Access-Control-Allow-Credentials: true'); 
$url="http://api.flurry.com/appMetrics/ActiveUsersByMonth?apiAccessCode=DXGSYSYBSK26BZNSJB2X&apiKey=Removed&startDate=2012-01-01&endDate=2012-12-30&country=LK&versionName=1.0&groupBy=MONTHS"; 
$json=file_get_contents($url); 
echo $json; 

客戶端的jQuery AJAX:

$.ajax({ 
    type: "GET", 
    url: "<?php echo base_url("frontpage/monthly_active_count"); ?>" 
}) 
    .done(function(data) { 
     console.log(data); 
     var activeUsers = []; 

     $.each(data.day, function(i, item) { 
      var arr = $.map(item, function(el) { return el; }); 
      activeUsers.push(arr[1]); 
     }); 

     var barChartData = { 
      labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], 
      datasets : [ 
       { 
        fillColor : "rgba(220,220,220,0.5)", 
        strokeColor : "rgba(220,220,220,0.8)", 
        highlightFill: "rgba(220,220,220,0.75)", 
        highlightStroke: "rgba(220,220,220,1)", 
        data : activeUsers 
       } 
      ] 

     } 
     var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData, { 
      responsive : true 
     }); 

    }); 
+0

很高興!你解決了它。 – 2014-10-04 15:26:48