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);
答
谢谢你的提示@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
你试过数据类型: 'JSON' 到数据类型: 'JSONP', – 2014-10-02 02:19:52
是。没有工作。我认为jsonp不支持毛茸茸的api – Dushan 2014-10-02 02:21:29
然后使用PHP来请求服务并使用它来编码成json。然后,您可以在Javascript中使用ajax访问该json。 – 2014-10-02 02:26:18