resource - no access control allow origin header is present jquery ajax origin

Error de Access-Control-Allow-Origin al enviar un jQuery Post a la API de Google

Question

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

Estoy jugando con Google Moderator API, pero cuando trato de 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 Authorization y no sé cómo hacerlo sin beforeCall desde $ .ajax: /

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

Answer 1

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

app_development.something.com , aquí el app_development.something.com ( _ ) subdominio está creando error CORS. Después de cambiar app_development a app-development , funciona bien.

Answer 2

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, el dominio crossdomain:true no es necesario aquí.

Además, es importante tener en cuenta que no puede realizar una llamada síncrona con $.ajax si su URL pertenece a un dominio diferente (dominio cruzado) o si está utilizando JSONP. Solo se permiten llamadas asincrónicas.

Nota: puede llamar al servicio de forma síncrona si especifica async:false con su solicitud.

Answer 3

Si tiene este error tratando de consumir un servicio que no puede agregar el encabezado Access-Control-Allow-Origin * en esa aplicación, pero puede poner delante del servidor un proxy inverso, el error puede evitarse con un encabezado volver a escribir.

Asumiendo 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 *;
}
}

Answer 4

Tenía exactamente el mismo problema y no era un 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

Answer 5

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