Отклонение перекрестного источника отклонено: политика одного источника запрещает чтение удаленных ресурсов (причина: запрос CORS не был успешным) - PullRequest
0 голосов
/ 30 августа 2018

спокойной ночи, сэр,

Я хочу показать Google Map из 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, что я должен сделать, чтобы мой код работал?

...