Error de acceso-control-permitir-origen al enviar una publicación jQuery a las API de Google

Leí mucho sobre el error 'Access-Control-Allow-Origin', pero no entiendo lo que tengo que arreglar :(

Estoy jugando con la API de Google Moderator, pero cuando intento agregar una nueva serie recibo:

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.

Intenté con y sin parámetro de devolución de llamada, intenté agregar 'Access-Control-Allow-Origin *' al encabezado. Y no sé cómo usar $ .getJSON aquí, si corresponde, porque tengo que agregar el encabezado de autorización y no sé cómo hacerlo sin beforeCall desde $ .ajax: /

¿Alguna luz para esta oscuridad uu?

Ese es el código:

<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 -->

Resolví el error de Access-Control-Allow-Origin modificando el parámetro dataType a dataType: 'jsonp' y agregando un 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
});

Tuve exactamente el mismo problema y no era dominio cruzado sino el mismo dominio. Acabo de agregar esta línea al archivo php que manejaba la solicitud ajax.

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

Funcionó a las mil maravillas. Gracias al cartel

Si tiene este error al tratar de consumir un servicio que no puede agregar el encabezado Access-Control-Allow-Origin *en esa aplicación, pero puede colocar frente al servidor un proxy inverso, el error puede evitarse con una reescritura del encabezado.

Suponiendo que la aplicación se está ejecutando en el puerto 8080 (dominio público en www.midominio.com ), y coloca el proxy inverso en el mismo host en el puerto 80, esta es la configuración para el proxy inverso de 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 *;
    }   
}

Sí, en el momento en que jQuery ve que la URL pertenece a un dominio diferente, asume esa llamada como una llamada de dominio cruzado, por lo tanto, crossdomain:trueno se requiere aquí.

Además, es importante tener en cuenta que no puede realizar una llamada sincrónica $.ajaxsi su URL pertenece a un dominio diferente (dominio cruzado) o si está utilizando JSONP. Solo se permiten llamadas asíncronas.

Nota: puede llamar al servicio sincrónicamente si especifica el async:falsecon su solicitud.

En mi caso, el nombre de subdominio causa el problema. Aquí hay detalles

Solía app_development.something.com, aquí el _subdominio subrayado ( ) está creando un error CORS. Después de cambiar app_developmenta app-developmentfunciona bien.

Hay un pequeño truco con php. Y funciona no solo con Google, sino con cualquier sitio web que no controle y no pueda agregar Access-Control-Allow-Origin *

Necesitamos crear un archivo PHP (ej. GetContentFromUrl.php ) en nuestro servidor web y hacer un pequeño truco.

PHP

<?php

$ext_url = $_POST['ext_url'];

echo file_get_contents($ext_url);

?>

JS

$.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': '/programming/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');
    }
});

Cómo funciona:

1. Su navegador con la ayuda de JS enviará una solicitud a su servidor
2. Su servidor enviará una solicitud a cualquier otro servidor y recibirá respuesta de otro servidor (cualquier sitio web)
3. Su servidor enviará esta respuesta a su JS

Y podemos hacer eventos en Click, poner este evento en algún botón. Espero que esto ayude!