Erreur d'Access-Control-Allow-Origin lors de l'envoi d'un jQuery Post aux API de Google

Question

J'ai lu beaucoup de choses sur l'erreur 'Access-Control-Allow-Origin', mais je ne comprends pas ce que je dois corriger :(

Je joue avec l'API Google Moderator, mais lorsque j'essaie de ajouter une nouvelle série Je reçois :

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.

J'ai essayé avec et sans paramètre de rappel, j'ai essayé d'ajouter 'Access-Control-Allow-Origin *' à l'en-tête. Et je ne sais pas comment utiliser $.getJSON ici, s'il y a lieu, car je dois ajouter l'en-tête d'autorisation et je ne sais pas comment le faire sans beforeCall de $.ajax :/

Une lumière pour cette obscurité ?

C'est le 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 -->

Answer 1

Dans mon cas, c'est le nom du sous-domaine qui pose problème. Voici les détails

J'ai utilisé app_development.something.com , ici underscore( _ ) le sous-domaine crée une erreur CORS. Après avoir modifié app_development a app-development cela fonctionne bien.

Answer 2

Il y a un petit hack avec php. Et cela ne fonctionne pas seulement avec Google, mais avec tout site web que vous ne contrôlez pas et ne pouvez pas ajouter Access-Control-Allow-Origin *.

Nous devons créer un fichier PHP (ex. getContentFromUrl.php ) sur notre serveur web et faire un petit tour.

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': 'https://stackoverflow.com/questions/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');
    }
});

Comment cela fonctionne :

1. Votre navigateur, avec l'aide de JS, enverra une demande à votre serveur.
2. Votre serveur enverra une demande à un autre serveur et recevra une réponse d'un autre serveur (n'importe quel site web).
3. Votre serveur enverra cette réponse à votre JS

Et nous pouvons faire des événements onClick, mettre cet événement sur un bouton. J'espère que cela vous aidera !