I have a problem of cross-domain. I want to execute some request to the google maps API but I have this error "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access." . I know there is many question about this problem but any answer helped me.
I have to do (thanks google maps API) some request to have the distance between a position and some station. It's a Spring project and I use Spring MVC.
here is my 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 used IDEA functionality to create my project so I didn't used maeven or graddle.I can't use jsonp and I know that I have to change something to use CORS and change something in my server ( tomcat 8.5.5 ) but I haven't really understand how it's works. If someone can help me.