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

J'ai résolu l'erreur Access-Control-Allow-Origin en modifiant le paramètre dataType en dataType : "jsonp et l'ajout d'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
});

Answer 2

J'ai eu exactement le même problème et ce n'était pas un domaine croisé mais le même domaine. J'ai simplement ajouté cette ligne au fichier php qui gérait la requête ajax.

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

Ça a marché comme un charme. Merci à l'affiche

Answer 3

Si vous avez cette erreur en essayant de consommer un service que vous ne pouvez pas ajouter l'en-tête Access-Control-Allow-Origin * dans cette application, mais vous pouvez mettre en face du serveur un reverse proxy, l'erreur peut être évitée avec une réécriture de l'en-tête.

En supposant que l'application fonctionne sur le port 8080 (domaine public à l'adresse www.mydomain.com ), et vous placez le proxy inverse dans le même hôte au port 80, c'est la configuration pour Nginx proxy inverse :

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

Oui, dès que jQuery voit que l'URL appartient à un domaine différent, il considère cet appel comme un appel inter-domaine, donc crossdomain:true n'est pas nécessaire ici.

De plus, il est important de noter que vous ne pouvez pas faire un appel synchrone avec $.ajax si votre URL appartient à un domaine différent (cross domain) ou si vous utilisez JSONP. Seuls les appels asynchrones sont autorisés.

Remarque : vous pouvez appeler le service de manière synchrone si vous spécifiez l'attribut async:false avec votre demande.

Answer 5

Essayez mon code En JavaScript

 var settings = {
              "url": "https://myinboxhub.co.in/example",
              "method": "GET",
              "timeout": 0,
              "headers": {},
            };
        $.ajax(settings).done(function (response) {
          console.log(response);
            if (response.auth) { 
                console.log('on success');
            } 
        }).fail(function (jqXHR, exception) { 
                var msg = '';
                if (jqXHR.status === '(failed)net::ERR_INTERNET_DISCONNECTED') {

                        msg = 'Uncaught Error.\n' + jqXHR.responseText; 
                }
                if (jqXHR.status === 0) {
                        msg = 'Not connect.\n Verify Network.';
                } else if (jqXHR.status == 413) {
                        msg = 'Image size is too large.'; 
                }  else if (jqXHR.status == 404) {
                        msg = 'Requested page not found. [404]'; 
                } else if (jqXHR.status == 405) {
                        msg = 'Image size is too large.'; 
                } else if (jqXHR.status == 500) {
                        msg = 'Internal Server Error [500].'; 
                } else if (exception === 'parsererror') {
                        msg = 'Requested JSON parse failed.'; 
                } else if (exception === 'timeout') {
                        msg = 'Time out error.'; 
                } else if (exception === 'abort') {
                        msg = 'Ajax request aborted.'; 
                } else {
                        msg = 'Uncaught Error.\n' + jqXHR.responseText; 
                }
                console.log(msg);
        });;

En PHP

header('Content-type: application/json');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET");
header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");