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

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.