Access-Control-Allow-Origin-Fehler beim Senden eines jQuery Post an Google API's

Ich habe viel über den 'Access-Control-Allow-Origin' Fehler gelesen, aber ich verstehe nicht, was ich beheben muss :(

Ich spiele mit der Google Moderator API, aber wenn ich versuche, neue Serie hinzuzufügen erhalte ich:

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.

Ich habe es mit und ohne Callback-Parameter versucht, ich habe versucht, 'Access-Control-Allow-Origin *' zum Header hinzuzufügen. Und ich weiß nicht, wie ich $.getJSON hier verwenden kann, wenn es anwendbar ist, weil ich den Authorization-Header hinzufügen muss und ich weiß nicht, wie ich es ohne beforeCall von $.ajax machen kann :/

Jedes Licht für diese Dunkelheit u.u?

Das's der Code:

<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 -->
Lösung

Ich habe den Access-Control-Allow-Origin-Fehler gelöst, indem ich den Parameter dataType in dataType:'jsonp' geändert und ein crossDomain:true hinzugefügt habe.

$.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
});
Kommentare (10)

Ich hatte genau das gleiche Problem und es war nicht domänenübergreifend, sondern dieselbe Domäne. Ich habe einfach diese Zeile in die PHP-Datei eingefügt, die die Ajax-Anfrage bearbeitet.

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

Es funktionierte wie ein Zauber. Vielen Dank an den Poster

Kommentare (2)

Ja, in dem Moment, in dem jQuery sieht, dass die URL zu einer anderen Domäne gehört, nimmt es an, dass der Aufruf ein domänenübergreifender Aufruf ist, daher ist "crossdomain:true" hier nicht erforderlich.

Außerdem ist es wichtig zu beachten, dass Sie keinen synchronen Aufruf mit "$.ajax" machen können, wenn Ihre URL zu einer anderen Domäne gehört (domänenübergreifend) oder Sie JSONP verwenden. Nur asynchrone Aufrufe sind erlaubt.

Hinweis: Sie können den Dienst synchron aufrufen, wenn Sie die Option "async:false" bei Ihrer Anfrage angeben.

Kommentare (0)