Google Translate API: не удается загрузить XMLHttpRequest.Происхождение http://test.dyndns.org не разрешено Access-Control-Allow-Origin

Question

Я только что получил доступ API к Google Translate API v2, и я использую мой ключ API в запросе AJAX, но я получаю эту ошибку:

XMLHttpRequest не может загрузить 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. Происхождение http://[mySub].dyndns.org запрещено Access-Control-Allow-Origin.

Я прочитал все подобные посты, но до сих пор не могу понять, в чем проблема. Обратите внимание, что выполняются следующие условия:

1. Я размещаю это на своем собственном сервере Apache дома через dyndns.org, поэтому я не использую ссылку на локальный файл в браузере. На самом деле у меня есть http://[mySub].dyndns.org, который соответствует сообщению об ошибке, и я не использую никаких фанк-портов. Я использую порт 80. Однако сервер и клиент - это один и тот же компьютер.
2. Я использую Google Chrome 13.0.782.220 m в Windows. Я не вижу этой ошибки в IE или Firefox, но функция обратного вызова также не работает в этих браузерах.
3. Ссылка в сообщении об ошибке действительно работает нормально.

Вот мой 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');
    }
});

Надеюсь, это что-то очевидное!

Answer 1

Вы должны использовать jsonp вместо json для dataType.

Посмотрите на этот пример: http://jsfiddle.net/H9mfd/

Answer 2

Рабочий пример благодаря CD = награжден

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

Очень полезно.+ 1.

Вот предоставленный пример, который проходит через объект JSON для замены на значения:

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

Попробуйте запустить Google Chrome со следующим флагом:

- disable-web-security

Ошибка может быть из-за Google Chrome «политика одного источника»функция, позволяющая избежать междоменных вызовов ajax