Ошибка Access-Control-Allow-Origin при отправке сообщения jQuery в API Google

128

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

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

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 здесь, если применимо, потому что мне нужно добавить заголовок авторизации, и я не знаю, как это сделать без beforeCall от $.ajax:/

Любой свет для этой темноты u.u?

Что код:

<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 -->
  • 1
    не могли бы вы поставить свой код немного более полно? Я не смог запустить твой код.
Теги:
rest
google-api
cors
jsonp

5 ответов

233
Лучший ответ

Я решил ошибку 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
});
  • 19
    Я не думаю, что crossDomain:true требуется. Насколько я понимаю, это необходимо только в том случае, если вы делаете запрос на свой собственный домен, но хотите, чтобы jQuery рассматривал его как междоменный запрос.
  • 7
    crossDomain не нужен. это обычный запрос jsonp , предназначенный для междоменной связи.
Показать ещё 7 комментариев
39

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

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

Он работал как шарм. Благодаря плакату

  • 25
    Это очень небезопасно. Если кому-то удастся внедрить JavaScript на вашу страницу, он может легко «позвонить домой» любой информации, которую может предоставить пользователь.
  • 0
    @ dclowd9901: «Небезопасный» является относительным в зависимости от цели использования и мер, наблюдаемых для установки заголовка Access-Control-Allow-Origin в анонимный среди других причин.
5

Если эта ошибка пытается использовать службу, которую вы не можете добавить заголовок Access-Control-Allow-Origin * в этом приложении, но вы можете поставить перед сервером обратный прокси, ошибки можно избежать при перезаписи заголовка.

Предполагая, что приложение запущено на порту 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 *;
    }   
}
  • 2
    Как уже упоминалось выше, использование * очень опасно.
  • 4
    Да, но в зависимости от того, что вы выставляете. Если вы публикуете общедоступный API без авторизации, это так (мой случай). Если нет, то вы должны использовать что-то вроде этого: Access-Control-Allow-Origin: http://example.com .
Показать ещё 2 комментария
5

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

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

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

0

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню