实现谷歌 URL 缩短 API 的跨域问题答案

【问题标题】：Cross Domain Issue with implementing Google URL shortener API实现谷歌 URL 缩短 API 的跨域问题
【发布时间】：2011-06-09 02:55:36
【问题描述】：

我正在尝试通过 AJAX 调用在 jQuery 的帮助下实现 Google URL Shorter API。我做过这样的事情：

$(function() {
    $('#btnshorten').click(function() {    
        var longURL = $('#tboxLongURL').val();

        $.ajax({
            url: 'https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&key=AIzaSyANFw1rVq_vnIzT4vVOwIw3fF1qHXV7Mjw',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: '{ longUrl: "' + longURL +'"}',
            dataType: 'json',
            success: function(response) {
                var result = eval(response); // Evaluate the J-Son response object.
            }
         });
    }); 
});

但它在 IE 中生成错误。它显示“访问被拒绝”，在 Firebug 中显示“405 方法不允许”。我在这里做错了吗？

【问题讨论】：

标签： jquery api google-url-shortener

【解决方案1】：

恐怕你确实是。由于浏览器的安全性，您不能进行跨域 ajax 调用。

我知道 Ext JS 提供了一个可以完成工作的 ScriptTagProxy 对象，但我不确定 jQuery 是否有类似的东西。

另一种方法是在您自己的主机上创建一种“代理”服务器端脚本，它可以接受来自您的 ajax 调用的参数、发出 HttpWebRequest 或类似于 googleapis.com 并输出要获取的响应再次通过您的 ajax 调用。然后只需修改您的 ajax url 参数以调用您的新代理脚本而不是 googleapis。也就是说——让服务器端做跨域请求。

【讨论】：

你使用什么服务器端语言？
也许我应该让自己更清楚：更改您的 ajax 调用以请求您自己域上的服务器端脚本，并传递适当的参数。创建此服务器端脚本以接受参数，发出 HttpWebRequest 或类似于 googleapis.com，然后输出响应，该响应将由您的 jQuery ajax 调用获取并在您已经定义的成功函数中进行评估。明白了吗？我已经相应地更新了答案
我怎么能通过 $.getJson 加载来自其他域的数据 ie twitter?
也许通过 JSONP？事实表明，使用浏览器实现的 XMLHttpRequests 您不能进行跨域调用。正如我的回复所提到的：有多种方法可以绕过它，例如：Ext JS 的 ScriptTagProxy 或 JSONP（jQuery 使用它进行跨域调用，本质上是一个脚本标签代理）。

【解决方案2】：

您可以使用动态脚本标签进行跨域 ajax 调用。正如here指出的那样，这种方法存在一些问题：很难知道内容何时可用，没有标准的方法，可以认为是“安全风险”。

但是，在我的情况下，该方法可以正常工作。参考here 的一个很好的例子。方法有点棘手。

【讨论】：

【解决方案3】：

在 Javascript 中，有 2 种方法可以实现 Google URL Shorter API：

方法 #1：使用 jsonlib，http://call.jsonlib.com/jsonlib.js 在这里尝试：http://jsfiddle.net/Qh4eR/

var longUrl = "http://google.com";
document.write("Long Url: "+longUrl);

function googlurl(url, cb) {
  jsonlib.fetch({
    url: 'https://www.googleapis.com/urlshortener/v1/url',
    header: 'Content-Type: application/json',
    data: JSON.stringify({longUrl: url})
  }, function (m) {
    var result = null;
    try {
      result = JSON.parse(m.content).id;
      if (typeof result != 'string') result = null;
    } catch (e) {
      result = null;
    }
    cb(result);
  });
}
googlurl(longUrl , function(s) { document.write("<BR>Short Url: "+s); });

方法 #2：使用 google 客户端库，https://apis.google.com/js/client.js，在这里试用：http://jsfiddle.net/pPHKe/2/

//var apiKey = 'YOUR_API_KEY';
//gapi.client.setApiKey(apiKey);
var longurl = 'http://www.google.com/';

gapi.client.load('urlshortener', 'v1', function() {
    var request = gapi.client.urlshortener.url.insert({
        'resource': {
            'longUrl': longurl
        }
    });
    var resp = request.execute(function(resp) {
        if (resp.error) {
            $("#show").html('Error. ' + resp.error.message);
        } else {
            $("#show").html("Short URL for "+longurl+" is: " + resp.id);
        }
    });
});

【讨论】：