Cross Domain Issue with implementing Google URL shortener API

Question

I am trying to implement the Google URL shortener API with the help of jQuery by making an AJAX call. I have done something like this:

$(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.
            }
         });
    }); 
});

But it is generating an error in IE. It is showing "Access is denied" and in Firebug it is showing "405 method not allowed." Am I doing something wrong here?

Answer 1

In Javascript, here are 2 ways to to implement the Google URL shortener API:

METHOD #1: Using jsonlib, http://call.jsonlib.com/jsonlib.js Try it out here: 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); });

METHOD #2: Using the google client library, https://apis.google.com/js/client.js, Try it out here: 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);
        }
    });
});

Answer 2

Indeed you are, I'm afraid. You can't make cross-domain ajax calls because of browser security.

I know that Ext JS offer a ScriptTagProxy object which can do the work, but I'm not sure if jQuery has anything similar.

An alternative would be to create a kind of "proxy" server-side script on your own host, which could accept parameters from your ajax call, make an HttpWebRequest or similar to googleapis.com and output the response to be picked up again by your ajax call. Then just modify your ajax url parameter to call your new proxy script instead of googleapis. In other words - let the server-side do the cross domain request.