2011-08-27 110 views
12

我嘗試使用下面的jQuery來獲得與Google Currency Calculator一個匯率(假)代碼:原產地「URL」沒有被允許訪問控制允許來源

$.getJSON("http://www.google.com/ig/calculator?hl=en&q=1" + "DOP" + "=?" + "USD", 
     function(data) { 
      $('.currNumber').each(function (index) { 
       $(this).html(parseFloat($(this).html()) * 0.02681); 
            }); 
      }); 

的XMLHttpRequest不能加載http://www.google.com/ig/calculator?hl=en&q=1DOP=?USD。 Access-Control-Allow-Origin不允許Origin'hostURL'。

尋找在現場我發現不同主題的主題,但他們大多是指訪問本地文件,並嘗試通過使用附加參數啓動鉻解決這個問題(我還使用鍍鉻),但這樣的不是我的問題,這實際上似乎更多與跨域限制有關。

所以,問題是:我如何使用jQuery從該網址獲取費率?

+0

的可能重複(http://stackoverflow.com/questions/1051748/cross-domain-scripting-error) – Joe

回答

17

Ajax請求受瀏覽器的Same Origin Policy限制。簡而言之,這意味着您不能通過與您的腳本運行的頁面不在同一個域上的ajax直接與服務器通話。所以,除非您正在爲google.com開發頁面,否則您不能直接與google.com交談。

此限制涉及插入腳本標記(通過腳本標記加載的JS文件不受同一個源策略限制),然後使用JSONP回調函數將數據結果傳遞迴主腳本腳本標籤。如果您嘗試使用的API支持它,那麼您可能需要在這裏執行此操作。

jQuery將在這裏幫助你很多,因爲它可以自動將ajax調用轉換爲通過腳本標記加載的JSONP調用,並且可以在跨域情況下工作。根據jQuery doc for it's ajax function,如果在ajax調用的參數字符串中看到「callback =」,或者您設置了crossDomain選項,它將自動執行此操作。

+10

我不是一個熟練的Web開發人員......這是如何完成的? – PedroC88

+1

請閱讀我最近編輯的更詳細描述。 jQuery可以爲你完成大部分工作,但你必須適當地配置ajax調用。 – jfriend00

+0

我已經嘗試過使用'&callback =?',但是這會導致資源被解釋爲腳本,但是使用MIME類型文本html進行傳輸。我認爲這意味着響應具有MIME類型的text/html而不是text/javascript,但是我無法解決這個問題,因爲我無法控制迴應......我能嗎? – PedroC88

2

編輯
我認爲這是明顯的問題是什麼,但現在看來,這可能不是所以這裏去。你看到的這個錯誤是服務器限制你的域通過ajax請求訪問它的資源。這是standard JavaScript security - 您的腳本只能與源於它的域進行通話。由於您的JavaScript未從Google的域加載,因此它不在允許通過ajax訪問計算器API的域列表中,這就是您看到此錯誤消息的原因。

使用jQuery進行跨域請求的選項是outlined here。正如我前面提到的,如果服務器支持它,JSONP將只是一個有效的選項,因爲它必須發回適當格式的JSON。


如果您提供指向您所指網頁的鏈接,它可能會有所幫助。

從外觀看,雖然這個API不支持JSONP(除非有一個未公開的參數),在這種情況下,它幾乎是您跨域ajax請求的唯一選項,因爲您不控制服務器並且不能更改access control headers

您可能需要考慮構建一個服務器端資源,以便在不受JavaScript安全模型(如the PHP script here)約束的情況下爲您訪問此API。

+0

鏈接到該網頁[跨域腳本錯誤?]?有JSON響應的那個?那就是'http://www.google.com/ig/calculator?hl = zh_CN&q = 1DOP =?USD'我也在爲webworks開發這個功能(所以這不會在任何服務器上運行,而是在移動設備上運行) – PedroC88

+0

@ PedroC88是否有關於API的文檔?你說你已經找到關於這個主題的各種話題;哪裏? –

+0

關於瀏覽器錯誤的各種話題,實際上不是API,而是API,我還沒有找到小隊。 – PedroC88

2

從這個鏈接看來 - http://api.jquery.com/jQuery.ajax/ - 之前由jfriend00提供 - 解釋了一個參數,您可以在JQuery ajax請求中包含一個名爲「crossDomain」的參數,該參數是一個布爾值。

跨域(默認爲false同域請求,真正的跨域請求) 類型:Boolean 如果要強制跨域請求(如JSONP)在同一個域,設置跨域的價值爲真。這允許,例如,服務器端重定向到另一個域。 (版本增加:1.5)

因此設置它爲true應該解決(?)這個問題。我不是專家,但是我在不斷遇到這個問題後嘗試了它,似乎解決了這個問題。

實施例:信息的

$.ajax({ //my ajax request 
     url: "_URL_I_AM_MAKING_REQUEST_TO_", 
     type: "GET", 
     cache: false, 
     dataType: "json", 
     **crossDomain: true,** 
     data: { _mydata_ 
     success : function(response){} 
}); 
+1

這不是財產是什麼。如果您閱讀jQuery文檔中的內容,那麼它'如果您希望強制跨域請求(例如JSONP)在同一個域上,請將crossDomain的值設置爲true。'它表示它將使相同的域請求看起來像跨域域請求。 – Ian

1

次要附加點。

我得到這個問題,因爲我得到這個錯誤試圖張貼到我自己的服務器。

解決方案:確保hostname匹配ajax調用。

〔實施例:

//This failed 

$.post("http://domain.com/index.php/count/", 

//This succeeded (the page this was called from was www.domain.com/.....) 

$.post("http://www.domain.com/index.php/count/", 
相關問題