Javascript Girl
  1. Javascript Girl
  3. XMLHttpRequest ne peut pas charger, l'en-tête «Access-Control-Allow-Origin» est présent sur la ressource demandée
Intereting Posts
Comment animerais-je le processus d'une image de toile transformée dans son état d'origine? Accéder à la première propriété d'un objet Fuite de mémoire avec XMLHttpRequest et setInterval Pourquoi est-il suggéré d'éviter .innerHTML? Convertir les entités de caractères HTML en texte ordinaire à l'aide de javascript Escape double orthèses {{…}} dans le modèle Moustache. (Modèle d'un modèle dans NodeJS) Phantomjs – capture la capture d'écran d'une page web Comment changer dynmiquement une ligne de fonction JavaScript? AngularJS – $ http get retourne l'erreur avec l'état 0? Comment puis-je attraper 2 + touches à la fois? Combinaison d3.js et backbone.js Comment calculer la somme des heures décimales L'appel récurrent d'une fonction à partir d'un rappel entraînera-t-il un débordement de pile? JavaScript – vérification des lettres minuscules dans une chaîne Comment exécuter JavaScript dans le navigateur de manière sécurisée et sécurisée?

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

XMLHttpRequest ne peut pas 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. Origin 'null' n'est donc pas autorisé à 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 quand je l'ouvre via un navigateur, j'ai la même erreur.

On dirait que vous avez un problème de crossdomain 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.

On dirait que l'api que vous utilisez n'est pas destiné à cette approche, peut-être cela peut-il aider: comment faire des appels AJAX multi-domaines vers l'API Google Maps?

C'est un peu délicat, même si vous avez correctement configuré CORS, cela échoue toujours. Vous devez utiliser la fonction de création de Google pour y accéder. Si vous essayez d'y accéder directement via $ .get () ou similaire, il échouera … vérifiez cet exemple: https://developers.google.com/maps/documentation/javascript/examples/distance-matrix

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

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

Mon conseil – n'essayez pas d'accéder à json / xml via get (). Utilisez la compilation API google dans les fonctions pour envoyer une demande, puis analysez la réponse correctement

Ce code d'exemple 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... } }

Il semble que vous essayez d'accéder à d'autres domaines de votre domaine. C'est un problème de domaine croisé, ajax n'est pas autorisé pour cet accès de domaine croisé, soit vous utilisez l'appel json ou l'appel côté serveur.

Si vous utilisez angularjs comme je l'étais, la demande devrait être comme celle-ci 

 var req = { method:'GET', 'url:'https://maps.googleapis.com/maps/api/distancematrix/json', headers: { 'Access-Control-Allow-Origin': '*' }, params: { origins:attrs.from, destinations:attrs.to } };