Google Translate API: XMLHttpRequest cannot load. Origin http://test.dyndns.org is not allowed by Access-Control-Allow-Origin

Question

I just gained API access to Google Translate API v2 and I'm using my API key in the AJAX request, but I keep getting this error:

XMLHttpRequest cannot load https://www.googleapis.com/language/translate/v2?key=[myKey]&source=zh-CN&target=en&q=%E6%82%A8%E5%A5%BD%E4%B8%96%E7%95%8C%0A. Origin http://[mySub].dyndns.org is not allowed by Access-Control-Allow-Origin.

I've read all the similar posts, but I still can't figure out what the problem is. Note that the following conditions are true:

1. I'm hosting this on my own Apache server at home via dyndns.org, so I'm not using local file reference in the browser. I actually have an http://[mySub].dyndns.org that matches the error message and I'm not using any funky ports either. I'm using port 80. The server and the client, however, are the same machine.
2. I'm using Google Chrome 13.0.782.220 m on Windows. I don't see this error in IE or Firefox, but the callback function also doesn't work on those browsers.
3. The link in the error message actually works fine.

Here's my jQuery...

$.ajax({
    url: 'https://www.googleapis.com/language/translate/v2',
    datatype: 'json',
    data: {
        key: '[myKey]',
        source: 'zh-CN',
        target: 'en',
        q: '您好世界' // Hello world
    },
    success: function(data) {
        console.log(data);
    },
    failure: function() {
        console.log('failure');
    }
});

I hope it's something obvious!

Answer 1

You should be useing jsonp instead of json for the dataType.

Have a look at this example: http://jsfiddle.net/H9mfd/

Answer 2

Working example thanks to CD = awarded

var apiKey = "YOUR-API-KEY-HERE";
var langSource = "en";
var langTarget = "it";
var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + "&source=" + langSource + "&target=" + langTarget + "&q=";
var text = 'This is a test string';

$.ajax({
    url: apiurl + encodeURIComponent(text),
    dataType: 'jsonp',
    success: function(data) {
        // console.log(data);
        console.log(data.data.translations[0].translatedText);
    }
});

Answer 3

Very helpful. +1.

Here's the provided example that loops through a JSON object to replace to values:

var dictionary = {"term" : "term"};
    var apiKey = YOUR API KEY;
    var langSource = "en";
    var langTarget = "it";
    var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + "&source=" + langSource + "&target=" + langTarget + "&q=";
    var newDictionary = {};

 $.each(dictionary, function(key, value) {
    $.ajax({
       url: apiurl + encodeURIComponent(value),
       dataType: 'jsonp',
       success: function(data) {
          var localO = new Object();
          localO[key] =  data.data.translations[0].translatedText;
          $.extend(newDictionary, localO); 
       }
    });
 });

//newDictionary == {"term": "italian translation"}

Answer 4

Try starting Google Chrome with the following flag:

--disable-web-security

The error can be due to Google Chrome "same origin policy", a feature to avoid cross domain ajax calls