Cross-domain issue using Google URL shortener API

Question

I am trying to implement the google url shortening API using jQuery by making an AJAX call. I did 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 this causes an error in IE. It shows that "Access is denied", and in Firebug it displays "405 method not allowed." Am I something wrong here?

Answer 1

Really, I'm scared. You cannot make cross-domain ajax calls due to browser security.

I know that Ext JS offers a ScriptTagProxy object that can do the job, but I'm not sure jQuery has something like that.

An alternative would be to create your own "proxy" on the server side of the script on your own host, which can take parameters from your ajax call, do an HttpWebRequest or similarly googleapis.com and display the answer raised your ajax call again. Then just change the ajax url parameter to call a new proxy script instead of googleapis. In other words, let the server side execute the cross-domain request.

Answer 2

In Javascript, you can find two ways to implement the Google URL shortening API:

METHOD # 1: Using jsonlib, http://call.jsonlib.com/jsonlib.js Try it 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 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 3

You can use a dynamic script tag to make ajax internetwork calls. As indicated here, this method has some problems: it is difficult to know when the content is available, there is no standard methodology and can be considered "security".

However, the method works fine in my case. see here for a good example. This approach is a bit complicated.