[GIS] Avoid CORS problems using javascript code loading layers in OpenLayers

corsjavascriptopenlayers

I am putting together a basic proof of concept for a client using OpenLayers to compare against Esri Javascript.

I understand that the medium to a long-term solution is to enable access on the server I am trying to gain data from. At this stage I am just prototyping and so wanted to load in a layer using the code, I probably will be using a proxy longer term anyway.

My starter for ten code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Tiled ArcGIS MapServer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="module">

      var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
          'Specialty/ESRI_StateCityHighway_USA/MapServer';

      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Vector({ 
            source: new ol.source.Vector({
                url: 'http://sites.google.com/site/geined13/tours/Volcanoes_of_the_World.kmz?attredirects=0&d=1/cors-anywhere.html',
                format: new ol.format.KML()
            })
        }),
        new ol.layer.Tile({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.TileArcGISRest({
            url: url
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>

Presumably, I can add something from within the Vector source class to either use a proxy, or ignore any CORS issues?

The site is hosted in IIS BTW.

The error is :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource
here.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

I have to admit I'm finding it difficult to find what I need in the Openlayers docs, couldn't find any demos using a proxy.

I have also found lots of posts around enabling CORS on the target server, this is not what I want to do right now at a sandbox prototyping stage. I am yet to persuade the client to use openlayers over Esri javascript (We will be wanting to manly use KML files from a server which we will NOT want to make public facing which is an issue with the ESRI control as it bounces via ArcGIS.com for some completely hard to grasp reason), so just want a quick and dirty prototype.

Best Answer

First try adding crossOrigin: 'anonymous'. If that doesn't work the source isn't CORS enabled. I did try and it's not CORS enabled, but using a proxy does work. For example:

source: new ol.source.Vector({
    url: 'myproxy.php?url=' + encodeURIComponent(
         'http://sites.google.com/site/geined13/tours/Volcanoes_of_the_World.kmz?attredirects=0&d=1/cors-anywhere.html'
    ),
    crossOrigin: 'anonymous',
    format: new ol.format.KML()
})
Related Question