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?

Answer 1

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();
   },
 });