Σφάλμα Access-Control-Allow-Origin που στέλνει ένα jQuery Post στο Google API's

Διάβασα πολλά για το σφάλμα 'Access-Control-Allow-Origin', αλλά δεν καταλαβαίνω τι πρέπει να διορθώσω :(

Παίζω με το Google Moderator API, αλλά όταν προσπαθώ να προσθέσω νέα σειρά λαμβάνω:

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 εδώ, αν ισχύει, γιατί πρέπει να προσθέσω την επικεφαλίδα Authorization και δεν ξέρω πώς να το κάνω χωρίς 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 -->
Λύση

Έλυσα το σφάλμα 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
});
Σχόλια (10)

Είχα ακριβώς το ίδιο πρόβλημα και δεν ήταν cross domain αλλά ο ίδιος τομέας. Πρόσθεσα απλώς αυτή τη γραμμή στο αρχείο php που χειριζόταν το αίτημα ajax.

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

Δούλεψε τέλεια. Ευχαριστώ τον αποστολέα

Σχόλια (2)

Ναι, τη στιγμή που η jQuery βλέπει ότι η διεύθυνση URL ανήκει σε διαφορετικό τομέα, θεωρεί ότι η κλήση είναι κλήση σε διαφορετικό τομέα, επομένως το crossdomain:true δεν απαιτείται εδώ.

Επίσης, είναι σημαντικό να σημειωθεί ότι δεν μπορείτε να πραγματοποιήσετε σύγχρονη κλήση με το $.ajax αν η διεύθυνση URL σας ανήκει σε διαφορετικό τομέα (cross domain) ή αν χρησιμοποιείτε JSONP. Επιτρέπονται μόνο ασύγχρονες κλήσεις.

Σημείωση: μπορείτε να καλέσετε την υπηρεσία συγχρονισμένα αν καθορίσετε το async:false με το αίτημά σας.

Σχόλια (0)