Ошибка Access-Control-Allow-Origin при отправке jQuery Post в Google API's

Я много читал об ошибке 'Access-Control-Allow-Origin', но я'не понимаю, что я должен исправить :(

Я играю с Google Moderator API, но когда я пытаюсь добавить новую серию, я получаю:

XMLHttpRequest cannot load 
https://www.googleapis.com/moderator/v1/series?key=[key]
&data%5Bdescription%5D=Share+and+rank+tips+for+eating+healthily+on+the+cheaps!
&data%5Bname%5D=Eating+Healthy+%26+Cheap
&data%5BvideoSubmissionAllowed%5D=false. 
Origin [my_domain] is not allowed by Access-Control-Allow-Origin.

Я пробовал с параметром callback и без него, я пробовал добавить 'Access-Control-Allow-Origin *' в заголовок. И я не знаю, как использовать $.getJSON здесь, если применять, потому что мне нужно добавить заголовок Authorization, и я не знаю, как сделать это без beforeCall из $.ajax :/.

Есть ли свет для этой тьмы?

Вот код:

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

var scope = "https://www.googleapis.com/auth/moderator";
var token = '';

function create(){
     if (token == '')
      token = doCheck();

     var myData = {
      "data": {
        "description": "Share and rank tips for eating healthily on the cheaps!", 
        "name": "Eating Healthy & Cheap", 
        "videoSubmissionAllowed": false
      }
    };

    $.ajax({

        url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
        type: 'POST',
        callback: '?',
        data: myData,
        datatype: 'application/json',
        success: function() { alert("Success"); },
        error: function() { alert('Failed!'); },
        beforeSend: setHeader

    });
}

function setHeader(xhr) {

  xhr.setRequestHeader('Authorization', token);
}

function doLogin(){ 
    if (token == ''){
       token = google.accounts.user.login(scope);
    }else{
       alert('already logged');
    }
}

function doCheck(){             
    token = google.accounts.user.checkLogin(scope);
    return token;
}
</script>
...
...
<div data-role="content">
    <input type="button" value="Login" onclick="doLogin();">
    <input type="button" value="Get data" onclick="getModerator();">
    <input type="button" value="Create" onclick="create();">
</div><!-- /content -->
sideshowbarker
Редактировал вопрос 2-го февраля 2019 в 4:28
Программирование
google-api jquery ajax jsonp cors
24-го мая 2011 в 5:31
30 просмотров
Комментарии к вопросу (1)
Решение

Я решил ошибку Access-Control-Allow-Origin, изменив параметр dataType на dataType:'jsonp' и добавив crossDomain:true.

$.ajax({

    url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
    data: myData,
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    success: function() { alert("Success"); },
    error: function() { alert('Failed!'); },
    beforeSend: setHeader
});
Комментарии (10)

У меня была точно такая же проблема, и это был не кросс-домен, а один и тот же домен. Я просто добавил эту строку в php файл, который обрабатывал ajax запрос.

<?php header('Access-Control-Allow-Origin: *'); ?>

Это сработало как шарм. Спасибо автору сообщения

Muhammad Tanweer
Редактировал ответ 16-го июля 2013 в 12:40
Комментарии (2)

Да, как только jQuery видит, что URL принадлежит другому домену, он принимает этот вызов за междоменный, поэтому crossdomain:true здесь не требуется.

Также важно отметить, что вы не можете сделать синхронный вызов с $.ajax, если ваш URL принадлежит другому домену (кросс-домен) или вы используете JSONP. Разрешены только асинхронные вызовы.

Примечание: вы можете вызвать сервис синхронно, если укажете в запросе async:false.

Roope
Редактировал ответ 13-го октября 2016 в 7:53
Комментарии (0)

Если у вас есть эта ошибка при попытке использовать службу, вы можете'т добавить заголовок контроля доступа-разрешить-происхождения * в этом приложении, но вы можете поставить перед сервером обратного прокси-сервера, ошибки можно избежать с переписать заголовок.

Предполагая, что приложение работает на порту 8080 (общественное достояние в www.mydomain.com), и поставить обратный прокси-сервер на том же хосте на порт 80, это конфигурация для nginx в обратный прокси-сервер:

server {
    listen      80;
    server_name www.mydomain.com;
    access_log  /var/log/nginx/www.mydomain.com.access.log;
    error_log   /var/log/nginx/www.mydomain.com.error.log;

    location / {
        proxy_pass   http://127.0.0.1:8080;
        add_header   Access-Control-Allow-Origin *;
    }   
}
Комментарии (5)

В моем случае имя поддомен вызывает проблему. Вот несколько деталей

Я использовал app_development.something.com вот подчеркивания(_) суб домен ошибка создания кеш. После изменения app_development для `разработки приложений, она отлично работает.

bg17aw
Редактировал ответ 13-го октября 2016 в 8:40
Комментарии (0)

Есть маленький хак с PHP. И это работает не только с Google, но и с любого веб-сайта, вы Дон'т управления и может'т добавить доступ-контроля-разрешить-происхождения *

Мы должны создавать php-файл (например. getContentFromUrl.php) на наш сервер и сделать небольшой трюк.

РНР

<?php

$ext_url = $_POST['ext_url'];

echo file_get_contents($ext_url);

?>

Яш

$.ajax({
    method: 'POST',
    url: 'getContentFromUrl.php', // link to your PHP file
    data: {
        // url where our server will send request which can't be done by AJAX
        'ext_url': 'https://stackoverflow.com/questions/6114436/access-control-allow-origin-error-sending-a-jquery-post-to-google-apis'
    },
    success: function(data) {
        // we can find any data on external url, cause we've got all page
        var $h1 = $(data).find('h1').html();

        $('h1').val($h1);
    },
    error:function() {
        console.log('Error');
    }
});

Как это работает:

  1. Вашего браузера с помощью JS будет отправлять запрос на сервер
  2. Ваш сервер будет отправлять запрос на любой другой сервер и получить ответ от другого сервера (на любом сайте)
  3. Ваш сервер будет отправлять этот ответ на вашего JS

И мы можем сделать события onclick функции, поставить это событие на какую-либо кнопку. Надеюсь, что это поможет!

Комментарии (0)