web-dev-qa-db-fra.com

XMLHttpRequest ne peut pas se charger, aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée

XMLHttpRequest ne peut pas se charger http://maps.googleapis.com/maps/api/distancematrix/xml?origins=Affenhausen&destinations=Achenkirch&mode=driving&language=de-DE&sensor=false . Aucun en-tête "Access-Control-Allow-Origin" n'est présent sur la ressource demandée. L'origine 'null' n'est donc pas autorisée à accéder.

Le code Javascript est comme

function distanceCalc(){
    start_location = $('select.start option:selected').val();
    target_location = $('select.end option:selected').val();
    $.get('http://maps.googleapis.com/maps/api/distancematrix/xml?origins='+start_location+'&destinations='+target_location+'&mode=driving&language=de-DE&sensor=false', function(data) {

DreamWeaver fonctionne, mais lorsque je l'ouvre via un navigateur, j'obtiens la même erreur.

javascriptjqueryxmlhttprequest
10
suatCoskun

C'est un peu délicat, même si CORS est correctement configuré, il échoue toujours. Vous devez utiliser les fonctions intégrées de Google pour y accéder. Si vous essayez d'y accéder directement via $ .get () ou similaire, il échouera ... consultez cet exemple: https://developers.google.com/maps/documentation/javascript/examples/distance- matrice

Fait intéressant, lors de l'accès via $ .get () (je ne sais pas pourquoi cependant):

-THIS WORKS: http://maps.googleapis.com/maps/api/geocode/

-THIS FAILS: http://maps.googleapis.com/maps/api/distancematrix/

Mon conseil - n'essayez pas de récupérer json/xml via get (). Utilisez les fonctions intégrées de l'API de Google pour envoyer une demande, puis analysez la réponse correctement

Cet exemple de code devrait vous aider à démarrer:

// var origins      = [];
// var destinations = [];

var distanceMatrix  = new google.maps.DistanceMatrixService();
var distanceRequest = { origins: origins, destinations: destinations, travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false };
distanceMatrix.getDistanceMatrix(distanceRequest, function(response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
        alert('Error was: ' + status);
    }
    else {
        var origins      = response.originAddresses;
        var destinations = response.destinationAddresses;
        // rest of your code here...
    }
}
10
lokers

On dirait que vous avez un problème de domaine croisé car il n'y a pas d'en-tête "Access-Control-Allow-Origin" dans la réponse. Si ce n'est pas le cas, un navigateur ne permet généralement pas de demander un service situé sur un autre domaine que le javascript qui déclenche la demande.

Il semble que l'API que vous utilisez n'est pas destinée à cette approche, cela peut peut-être aider: Comment faire des appels interdomaines AJAX appels à l'API Google Maps?

9
homtg