He leído mucho sobre el error 'Access-Control-Allow-Origin', pero no entiendo lo que tengo que arreglar :(
I'm jugando con Google Moderator API, pero cuando trato de añadir 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.
He probado con y sin parámetro de devolución de llamada, he intentado añadir 'Access-Control-Allow-Origin *' a la cabecera. Y no sé cómo usar $.getJSON aquí, si se aplica, porque tengo que añadir la cabecera Authorization y no sé cómo hacerlo sin beforeCall de $.ajax :/
¿Alguna luz para esta oscuridad u.u?
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 -->
He solucionado el error Access-Control-Allow-Origin modificando el parámetro dataType a dataType:'jsonp' y añadiendo 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
});
Yo tenía exactamente el mismo problema y no era un dominio cruzado sino el mismo dominio. Acabo de añadir esta línea al archivo php que estaba manejando la solicitud ajax.
<?php header('Access-Control-Allow-Origin: *'); ?>
Ha funcionado de maravilla. Gracias a la persona que ha escrito este artículo
Sí, en el momento en que jQuery ve que la URL pertenece a un dominio diferente, asume esa llamada como una llamada entre dominios, por lo que crossdomain:true
no es necesario aquí.
Además, es importante tener en cuenta que no se puede hacer una llamada sincrónica con $.ajax
si la URL pertenece a un dominio diferente (cross domain) o si se utiliza JSONP. Sólo se permiten las llamadas asíncronas.
Nota: puede llamar al servicio de forma sincrónica si especifica async:false
con su solicitud.