2014-10-22 60 views
2

我有一個特別奇怪的情況,我從來沒有經歷過。Cross Origin Request加載Google JS api時被阻止

的目的我的代碼: 我使用Parse.com作爲我的後端製作一個web應用程序,並希望使用Google Charts幾個餅圖添加到網頁。

我做了什麼: 作爲對文檔說,我裝了谷歌JS API,使用標籤:

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

問題從這裏開始自己。包含此標記後,我打開了該頁面後,頁面加載失敗(因爲它被卡住在Read www.google.com...上,而我只能看到一個白色屏幕)。我打開控制檯,發現如下信息:

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這裏是我的解析後端創造和函數被調用的頁面加載過程本身來從它的一些數據類的名稱。

我試圖加載JS API在一個單獨的頁面,它已成功工作。 任何想法如何解決它?在我的情況下,加載Parse.com的API和Google的JS API也很重要。任何幫助? 謝謝。

P.S.以下這些腳本頁面加載過程中加載:

<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是精縮jQuery庫。 'myquery.js'和userquery.js是我自己寫的JS文件。

+0

您是從本地文件系統還是從本地服務器工作? – 2014-10-22 06:55:17

+0

更好地獲取該文件並將其保存到您的服務器。 – roullie 2014-10-22 06:55:58

+0

我嘗試了兩種方法,當我從localHost打開它時以及將應用程序部署到萬維網時,我收到了此消息。 (我正在與Parse.com本身進行託管) – 2014-10-22 06:56:13

回答

0

您確定您正在使用JSONP?我甚至在本地主機上使用過Google的jsapi(儘管沒有解析)。您可以將數據解析爲Web服務,然後可以對您的分析服務進行AJAX JSONP調用。

這對我來說沒有任何問題,我已經在localhost和各種域上嘗試過。

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