Отклонение перекрестного источника отклонено: политика одного источника запрещает чтение удаленных ресурсов (причина: запрос CORS не был успешным)
Доброй ночи, сэр,
я хочу показать карту Google из getJson Url, и у меня уже есть метод для анализа данных в базе данных в jsonArray в том же проекте (другой контроллер), когда я вызываю URL в карте, я получил эту ошибку
Cross-Origin Rejection Rejected: Same Origin policy prohibits the reading of remote resources at http://127.0.0.1:8080/edclistapps/map_list. (Reason: CORS request was not successful)
и у меня есть js с методом getJSON для вызова (json) из другого сервиса в моем проекте для отображения маркера на карте Google, и этот сервис может работать, но у моего js и моего getJson есть консольная ошибка, это мой js
<div class="controls">
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Merchant Grub</option>
<option value="BAKMI GM">BAKMI GM</option>
<option value="CHATIME">CHATIME</option>
<option value="PUYO">PUYO</option>
</select>
</div>
<div id="map-canvas"></div>
<script>
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// init map
function initialize() {
var center = new google.maps.LatLng(-6.121435, 106.774124);
var styles = [{ "stylers": [{ "saturation": -80 }, { "gamma": 2 }] }, { "featureType": "water", "stylers": [{ "lightness": -15 }] }];
var styledMap = new google.maps.StyledMapType(styles, { name: "EDC" });
var mapOptions = { scrollwheel: false, zoom: 4, center: center, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] } };
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var url = "http://127.0.0.1:8080/edclistapps/map_list";
$.getJSON(url, function (markers1) {
$.each(markers1, function(key,val){
addMarker(key)
});
});
}
// add markers to map
function addMarker(marker) {
var category = marker[4];
var title = marker[3];
var pos = new google.maps.LatLng(marker[8], marker[9]);
var content = marker[3];
var city = marker[6];
var myIcon='http://ruralshores.com/assets/marker-icon.png';
marker1 = new google.maps.Marker({
title: title,
position: pos,
category: category,
map: map,
icon: myIcon
});
gmarkers1.push(marker1);
// marker click listener
google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
return function () {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(content);
// infowindow.setContent(city);
infowindow.open(map, marker1);
// map.panTo(this.getPosition()); // pan to lat/long of map marker
map.setZoom(12);
}
})(marker1, content));
}
// filter markers by category
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// categories don't match
else {
marker.setVisible(false);
}
}
}
// Init map
initialize();
</script>
Я использую Springboot и Thimeleaf, что я должен сделать, чтобы мой код работал?