是否可以在Javascript中設置跨域請求並設置自定義標頭？

Question

由於您無法在JSONP調用上應用自定義標頭 ，如何使用jQuery創建跨域請求並應用自定義標頭？

我基本上試圖使用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很簡單，但是它會占用很多資源，一直在服務器端解析Feed。

Answer 1

您可以使用Google的JavaScript客戶端庫來查詢Docs API。 雖然它沒有專門為Docs提供幫助程序，但它仍然可以與大多數API一起使用，包括Docs。 請參閱Google員工的博文 ，其中顯示了一個有效的示例。

如果您最終獲得無限授權，請參閱Google網上論壇中的相關問題 。 基本上，cookie的設置速度不夠快，因此當JavaScript客戶端庫檢查時，它什么也找不到，並重定向到OAuth授權頁面。 解決方案是在檢查完成之前添加一個小延遲，或者使用啟動授權的登錄按鈕而不是在頁面加載時執行。

您還需要將任何圖像添加到位於同一域中的頁面。 它可以用CSS隱藏，只要在DOM中。

使用上面博客文章中的示例，我能夠僅使用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);
    }
};  
​

Answer 2

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

• 如果您使用的是PHP，請使用curl 。
• 如果您使用的是Java，請使用URLConnection或更方便的Apache HttpClient 。
• 如果您使用的是C＃/ .NET，請使用WebClient 。
• 如果您使用的是Ruby，請使用Net::HTTP 。

Answer 3

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