是否可以在 Javascript 中发出跨域请求并设置自定义标头？

发布于 2024-09-06 13:42:25 字数 713 浏览 7 评论 0原文

由于无法在 JSONP 调用上应用自定义标头，如何做我使用 jQuery 发出跨域请求并应用自定义标头？

我基本上尝试使用 jQuery 访问 google 文档，并且需要传递身份验证令牌：

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 时始终会占用大量资源。

原文

Since you can't apply custom headers on JSONP calls, how do I make cross domain requests AND apply custom headers using jQuery?

I'm basically trying to access google docs with jQuery and need to pass an authentication token:

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

Note: The goal of this is to completely bypass the application layer. It's simple to use ruby to connect to the Google Data API, but it takes up a lot of resources parsing feeds all the time server-side.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

差↓一点笑了 2024-09-13 13:42:25

您可以使用 Google 的 JavaScript 客户端库来查询 Docs API。尽管它没有专门针对文档提供帮助程序，但它仍然可以与大多数 API 一起使用，包括文档。请参阅这篇博客文章，作者：展示工作示例的 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);
    }
};

You can use Google's JavaScript client library to query the Docs API. Although it doesn't come with helpers for Docs specifically, it can still be used with most APIs, including Docs. See this blog post by a Google employee that shows a working example.

If you end up in an infinite loop of authorizations, see this related question from Google groups. Basically, the cookies aren't getting set fast enough, so when the JavaScript client library checks, it finds nothing and redirects to the OAuth authorization page. A solution is to either add a small delay before the check is done, or use a login button that initiates the authorization instead of doing it on page load.

You would also need to add any image to your page that resides on the same domain. It can be hidden with CSS, as long as in the DOM.

Using the example in the above blog post, I was able to retrieve my documents list with JavaScript alone. Here's the modified initialize function I used to get rid of the infinite authorization loop:

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 原文