Jquery ajax请求乱码给出错误跨源请求被阻止

问题描述:

我正在使用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

谢谢你的提示@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