Cross Domain Issue with implementing Google URL shortener API

问题

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?

回答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.

回答2:

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

回答3:

You can use a dynamic script tag to make cross domain ajax calls. As pointed here this method has some problems: It's difficult to know when the content is available, there is no standard methodology, and can be considered a "security risk".

However the method works fine in my case. refer to here for a good example. The approach is a bit tricky.

来源：https://stackoverflow.com/questions/4690927/cross-domain-issue-with-implementing-google-url-shortener-api

标签

jquery

api

google-url-shortener