Jquery 实现Google URL shortener API的跨域问题

我试图在jQuery的帮助下通过AJAX调用实现GoogleURL ShortenerAPI。我做过这样的事情：

$(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方法不允许”。我在这里做错了什么吗？

恐怕你确实做错了。由于浏览器的安全性，您无法进行跨域ajax调用

我知道ExtJS提供了一个ScriptTagProxy对象来完成这项工作，但我不确定jQuery是否有类似的功能

---

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

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

---

然而，在我的例子中，该方法很好地工作。请参阅以获取一个好的示例。这种方法有点棘手。

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

方法1：使用jsonlib，

http://call.jsonlib.com/jsonlib.js

在这里尝试一下：

---

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

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

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