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

Question

I'm using flurry api to receive json data. So I have to call more than one time to flurry url and receive data. But except first request, all the other requests gives this error

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

I have created jfiddle for this. There you can see the same error.

Here is the code I'm using to recieve data

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/

Answer 1

Thanks @Human love for the tip. Achived what I wanted by trying this way. Moved my flurry url to php and requested service from there. Then encoded the result in to json. It giving same errors if you didn't set the headers properly.

Server side code:

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;

Client side 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
        });

    });