Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden

Question

Ich habe ein Problem der domänenübergreifenden. Ich möchte eine Anfrage an die Google Maps-API ausführen, aber ich habe diesen Fehler "Nein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Ursprung' http://localhost:8080 'ist daher nicht erlaubt." . Ich weiß, dass es viele Fragen zu diesem Problem gibt, aber jede Antwort hat mir geholfen.

Ich muss (dank Google Maps API) einige Anfrage, die Entfernung zwischen einer Position und einer Station zu haben. Es ist ein Frühlingsprojekt und ich benutze Spring MVC.

hier ist mein JS-Code:

findShorterWay = function(){ 
    origin = document.getElementById('shorterWays').value; 
    if(origin){ 
     for (var i = 0; i < stationNameArray.length; i++){ 
      $.ajax({ 
       url: 'https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins='+origin+'&destinations='+stationNameArray[i].lat+','+stationNameArray[i].lng+'&key=KEY', 
       data: { 
        sensor: false, 
       }, 
       success: function (data) { 
        console.log(data); 
        } 
       }); 
      } 
     } 
    } 

I verwendet IDEA Funktionalität meines Projekt zu erstellen, so dass ich nicht maeven oder graddle.I verwendet, so kann nicht verwenden JSONP und ich weiß, dass ich etwas ändern muß um CORS zu benutzen und etwas auf meinem Server (Tomcat 8.5.5) zu ändern, aber ich habe nicht wirklich verstanden, wie es funktioniert. Wenn mir jemand helfen kann.

Answer 1

CORS-Header sollten auf maps.googleapis.com gesetzt werden. Leider können Sie das nicht tun und Google wollte sie aus irgendeinem Grund nicht hinzufügen.

Wenn Sie Abstandsmatrixberechnungen vom JavaScript-Code des Browser-Clients ausführen müssen, müssen Sie die Clientseite distance matrix service der Maps-JavaScript-API verwenden.

Andernfalls müssen Sie HTTP-Anforderungen von Ihrem serverseitigen Java-Code senden, um dieses Problem zu vermeiden.