Akshay Arora Akshay Arora - 1 year ago 69
Javascript Question

Cross Origin Request Blocked while loading Google JS api

I have a particularly weird situation I have never experienced before.

Aim of my code:
I am making a web app using Parse.com as my backend and want to use Google Charts to add a few pie charts to a web page.

What I did:
As stated on documentation, I loaded the Google JS api, using the tag:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>


The problem starts from here itself. After I opened the page after including this tag, the page load failed ( in the sense that it was stuck on
Read www.google.com...
and all I was able to see a white screen). I opened the console and found the following message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.parse.com/1/classes/MyClass. This can be fixed by moving the resource to the same domain or enabling CORS.


MyClass
here is the name of the class that I have created in the Parse Backend and a function is invoked to fetch some data from it during the page load itself.

I tried to load the JS api in a seperate page and it was successfully working.
Any ideas how to fix it? In my case, its important to load both, Parse.com's API and Google's JS api too. Any help?
Thank You.

P.S. These following scripts are loaded during page load:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
<script type="text/javascript" src="myquery.js"></script>
<script type="text/javascript" src="userquery.js"></script>


jquery.js
is the minified jQuery library.
'myquery.js' and
userquery.js
are the JS files I wrote myself.

Answer Source

Are your sure your are using JSONP? I have used Google's jsapi even on localhost (though not with parse). You can expose your data on parse as a web service and then can make a AJAX JSONP call to your parse service.

This has worked for me without any issue, I have tried it on localhost and also on various domains.

var jsonData = jQuery.ajax({
                        type: 'POST',
                        url: base_url+"index.php/<url>?callback=?",
                        dataType:"jsonp",
                        data: {userID : uID},
                        async: false
                        }).responseText;

var options = {
  title: 'Title',
  hAxis: {title: 'X'},
  vAxis: {title: 'Y'}
};

//create table for google visualization
var datatable = new google.visualization.DataTable();

//add rows and column to datatable

 ....

//draw chart
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data1, options);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download