dongxinpa3101
dongxinpa3101
2014-10-02 02:18

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

已采纳

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/

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dsasd12314 dsasd12314 7年前

    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
            });
    
        });
    
    点赞 评论 复制链接分享