CODEWITHSUNDEEP
javascriptjqueryajaxcors
cphill
cphill

Reputation: 5924

CORS Support Not working with Domain

I am running a Google Super Proxy project on a local server and trying to pull the JSON query data that is being hosted from a Google appspot website.

http://userTest.appspot.com/query?id=ahJzfmNvbm5vcnBoSDfsFEWDSDxsaXBzMjRyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA

The issue I keep running into is that I am not allowed to access this webpage from my local server, because I don't have CORS support. I have tried both JavaScript and JQuery was to enable CORS support, but I'm still getting two error messages in my console. Anyone know what could help?

1)

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://userTest.appspot.com/query?id=ahJzfmNvbm5vcnBoaWEEWWEWxsaXBzMjRyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA

2)

XMLHttpRequest cannot load http://userTest.appspot.com/query?id=ahJzfmNvbm5vcnBoaWxsaXBzMjREWEADSdyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

index.html:

<!doctype html>
<html>

    <head>
        <title>Google Super Proxy Test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="chart-options.js"></script>
         <script src="Chart.min.js"></script>
    </head>

<body>

    <div style="width: 50%">
        <canvas id="sessions-graph" height="450" width="600"></canvas>
    </div>


</body>

</html>

chart-options.js:

$.ajax({
    type: 'GET',
    url: 'http://userTest.appspot.com/query?id=ahJzfmNvbm5vcnBoaWxsaXBzMSDFSDFSjRyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA',
    contentType: 'json',
    crossDomain: true,
    headers: { 'Access-Control-Allow-Origin': '*'},
    success: function(data) {
        $.each(data, function(index, element) {
            alert(element.name);
    })
},
    xhrFields: {
        withCredentials: true
        },

    error: function (json) {
        debugger;
    }
});



    var barChartdata = {
        labels: [],
        datasets: [
            {
                label: "My First dataset",
                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: []
            }
        ]
    };


    var options = {

        //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
        scaleBeginAtZero : true,

        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines : true,

        //String - Colour of the grid lines
        scaleGridLineColor : "rgba(0,0,0,.05)",

        //Number - Width of the grid lines
        scaleGridLineWidth : 1,

        //Boolean - If there is a stroke on each bar
        barShowStroke : true,

        //Number - Pixel width of the bar stroke
        barStrokeWidth : 2,

        //Number - Spacing between each of the X value sets
        barValueSpacing : 5,

        //Number - Spacing between data sets within X values
        barDatasetSpacing : 1,

        //Boolean - Set if responsive or not
        responsive : true

    }

window.onload = function(){

    // Get the context of the canvas element
    var ctx = document.getElementById("sessions-graph").getContext("2d");
    var sessionsGraph = new Chart(ctx).Bar(barChartdata, options); //Create a chart with "data" array

};

Upvotes: 1

Views: 678

Answers (1)

Quentin
Quentin

Reputation: 944441

Access-Control-Allow-Origin is a response header.

The server you are asking to give you the data has to provide it in the HTTP response. Edit the code responsible for generating http://userTest.appspot.com/query to include it.

It does not belong in the request headers. Your script can't give itself permission to access any site.

By making it a request header, you are triggering a preflight OPTIONS request (which is the likely cause of your method not allowed error).

Upvotes: 1

Related Questions