Question

Since you can't apply custom headers on JSONP calls，如何使用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很简单，但是它会占用很多资源，而且会在服务器端一直解析提要。

Answer 1

您可以使用Google的JavaScript客户端库来查询Docs API。虽然它没有专门为Docs提供帮助程序，但它仍然可以与大多数API一起使用，包括Docs。由显示实际示例的Google员工查看此blog post。

如果您最终获得无限授权，请参阅Google网上论坛中的related question。基本上，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标头，您就可以。然后，只需在支持标准跨域XHR API和IE中XMLHttpRequest的浏览器中使用XDomainRequest API。

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

3 个答案: