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
};
