KML with image that from source that does not have Access_Control_Allow_Origin header

Question

i'm using openlayers and trying to show a KML inside my map on a web application hosted by IIS. An example of the KML i'm using is:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
   <Document>
      <name>Test CORS KML</name> 
      <Style id="badCors">
         <IconStyle>
            <color>ff589d0f</color>
            <scale>1</scale>
            <Icon><href>https://www.gstatic.com/mapspro/images/stock/1415-rec-winter-snow.png</href>
            </Icon>
         </IconStyle>
      </Style>
      <Placemark>
         <name>Bad Mark</name>
         <styleUrl>#badCors</styleUrl>
         <Point>
            <coordinates>4.3849582,50.9757646,0</coordinates>
         </Point>
      </Placemark>
   </Document>
</kml>

this doesn't work however, i get the error:

Access to image at 'https://www.gstatic.com/mapspro/images/stock/1415-rec-winter-snow.png' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

if i change the kml so that the image is instead using the url https://maps.google.com/mapfiles/kml/shapes/snowflake_simple.png , it shows up fine without any issues.

I'm trying to find out how to use url rewrite to add the 'Access-Control-Allow-Origin' to the first/bad link, but nothing i'm trying is working. https://kamranicus.com/posts/2016-03-06-cors-multiple-origins-iis seemed promising, but it hasn't worked for me. if i use an extension like https://mybrowseraddon.com/access-control-allow-origin.html, that fixes the problem, but that's not a real solution for my situation.

What's the best way to show KML images that aren't set up for CORS in openlayers?

If it's your own KML you can copy the images to your own server or localhost — Mike, Oct 10 '19 at 20:01
Not an option for me unfortunately. the KML comes from my client — Phil, Oct 10 '19 at 20:13

score 0 · Accepted Answer · answered Oct 10 '19 at 21:25

You are probably going to need a simple proxy on your server to bypass the CORS and your OpenLayers source setup will need a loader (there is no bbox strategy so a simplified version of the one in https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html) to prefix href urls with your proxy

var vectorSource = new Vector({
  format: new KML(),
  loader: function() {
     var url = 'your-kml.kml;
     var xhr = new XMLHttpRequest();
     xhr.open('GET', url);
     xhr.onload = function(extent, resolution, projection) {
       if (xhr.status == 200) {
         var text = xhr.responseText.replace(
           /\<href\>http/gi,
           '<href>yourproxy?http'
         );
         vectorSource.addFeatures(
           vectorSource.getFormat().readFeatures(text, {
             dataProjection: 'EPSG:4326',
             featureProjection: projection
           })
         );
       }
     }
     xhr.send();
   },
 });

i was hoping there would be a different answer for some reason, but i can make this work. thank you! — Phil, Oct 10 '19 at 23:07
Here is the problem https://github.com/openlayers/openlayers/blob/master/src/ol/format/KML.js#L1226 It would be simple enough to allow a `crossOrigin: null` option in the KML constructor to prevent making CORS requests to non-enabled resources as with any other icon. — Mike, Oct 11 '19 at 13:45

KML with image that from source that does not have Access_Control_Allow_Origin header

1 Answers1