2010-06-18 68 views
5

Since you can't apply custom headers on JSONP calls,我如何製作跨域請求並使用jQuery應用自定義標頭?是否有可能在Javascript中創建跨域請求並設置自定義標頭?

基本上我試圖用jQuery訪問谷歌文檔和需要通過身份驗證令牌:

var token = "my-auth-token"; 
$.ajax({ 
    url: "http://docs.google.com/feeds/documents/private/full?max-results=1&alt=json", 
    dataType: 'json', 
    beforeSend: function(xhr) { 
    xhr.setRequestHeader("Authorization", "GoogleLogin auth=" + token); 
    }, 
    success: function(data, textStatus, XMLHttpRequest) { 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
    } 
}); 

注:這樣做的目的是完全繞行應用層。使用ruby連接到Google Data API非常簡單,但是它始終需要大量資源解析源服務器端的資源。

+3

您不能出於同樣的原因,因爲您不能對myBank.com執行相同類型的請求,該請求會獲取我的信息或鎖定我的帳戶,但任何一個都是非常不受歡迎的...並且確切地說爲什麼不允許這樣的跨域請求。 – 2010-06-18 22:08:41

回答

5

您可以使用Google的JavaScript客戶端庫來查詢Docs API。儘管它沒有專門針對Docs的助手,但它仍可以用於大多數API,包括Docs。 Google員工看到此blog post,該員工顯示了一個工作示例。

如果最終發生無限循環授權,請參閱Google羣組中的此related question。基本上,cookies的設置速度不夠快,所以當JavaScript客戶端庫檢查時,它什麼也找不到,並重定向到OAuth授權頁面。解決方案是在檢查完成之前添加一個小延遲,或使用啓動授權的登錄按鈕,而不是在頁面加載時執行。

您還需要將任何圖像添加到駐留在同一個域中的頁面上。只要在DOM中,它可以用CSS隱藏。

使用上述博客文章中的示例,我能夠單獨使用JavaScript檢索文檔列表。下面是我用修改後的初始化函數擺脫無限循環授權的:

function initialize() { 
    var scope = 'http://docs.google.com/feeds/'; 

    if (google.accounts.user.checkLogin(scope)) { 
     var service = new google.gdata.client.GoogleService('writely', 'DocList-App-v1.0'); 
     service.getFeed(scope + 'documents/private/full/', handleFeed, handleError); 
    } else { 
     var loginButton = $("<button>Click here to login</button>"); 
     loginButton.click(function() { 
      var token = google.accounts.user.login(scope); // can ignore returned token 
     }); 
     $("body").append(loginButton); 
    } 
}; 
​ 
+0

幾乎在那裏!現在,我在通話服務中收到此錯誤。getFeed':「未捕獲錯誤:在此頁面上需要同一個域的圖像以進行已認證的讀取和所有寫入操作。」有任何想法嗎??? – 2010-06-19 01:32:36

+1

@viatropos - 你快到了。將任何圖像放在頁面上,但它必須駐留在同一個域中。例如,我把這個臨時圖像放在頁面上,並用樣式表隱藏起來 - ''。 – Anurag 2010-06-19 01:39:04

+0

真棒!這正是我所期待的,非常感謝Anurag。 – 2010-06-19 01:39:36

3

考慮在代理服務器端編寫一些代碼,讓jQuery調用它。

+0

你可以。許多新版本的瀏覽器都支持跨域XHR,包括IE8。 – 2010-06-19 01:07:52

+0

@Eli - 不,你不能,不是OP原來的方式......這不是「支持它」的問題,而是完全相反,他們正在積極地阻止它作爲安全措施。 – 2010-06-19 02:11:36

+0

@Eli:我更新了答案,刪除了「你不行」。如果你糾正了失望,我會很感激。 – BalusC 2010-06-19 02:47:22

0

可以,只要外部域允許它通過發送適當的Access-Control-Allow-Origin頭。然後在IE中使用支持標準跨域XHR API和XDomainRequest的瀏覽器中的XMLHttpRequest API。

相關問題