CORS blocking ImageWMS access

Question

I have a problem rendering Austrian raster-data via ImageWMS in an Angular App. I use php on server side (virtual server) and I am not able to redirect the link to avoid CORS problem.

Any hint is much appreciated, many thanks in advance - Susanne

Here the example code:

var bounds = [1700000, 6200000, 1800000, 6300000];
let tt = new ImageLayer({
    gname: 'Kataster-BEV',
    source: new ImageWMS({
        matrixSet: 'google3857',
        projection: this.projectionService.projGoogle,
        params: {
            'LAYERS': 'CP.CadastralZoning_Zoning,CP.CadastralParcel_Parcel',
            'FORMAT': 'image/png',
            'TRANSPARENT': 'FALSE',
        },
        serverType: 'geoserver',


        url: "redirect.php",
        crossOrigin: 'anonymous',
        extent: bounds,
        wrapX: true
    })
});

url to redirect: "https://wsa.bev.gv.at/GeoServer/Interceptor/Wms/CP/INSPIRE_KUNDEN-ddf0f80a-ec58-4138-833d-a773ecd555b6?REQUEST=GetMap&STYLES=&width=1500&FORMAT=image/png&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE",

to avoid additional problems I dont pass the url to the php script but set the url in the script directly

Mike · Answer 1 · 2021-05-03T22:08:03.413

OpenLayers passes parameters to a WMS url, including an appropriate WIDTH and HEIGHT which is calculates to suit the viewport, so your proxy must process those and not hard-code any values

  new ImageLayer({
     source: new ImageWMS({
      url: 'redirect.php',
      params: {
        'LAYERS': 'CP.CadastralZoning_Zoning,CP.CadastralParcel_Parcel',
        'FORMAT': 'image/png',
        'TRANSPARENT': 'FALSE',
        'BGCOLOR': '0xFFFFFF',
      },
    }),
  })

This simple proxy works for me (using http instead of https)

<?php 
 $method = $_SERVER['REQUEST_METHOD'];
 if($method == "GET"){
   $url = 'http://wsa.bev.gv.at/GeoServer/Interceptor/Wms/CP/INSPIRE_KUNDEN-ddf0f80a-ec58-4138-833d-a773ecd555b6?' . $_SERVER['QUERY_STRING'];
   $ch = curl_init($url);
   curl_setopt($ch, CURLOPT_HEADER, 0);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
   $result = curl_exec($ch);
   $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
   curl_close($ch);
   if ($httpCode == 200) {
     echo $result;
   }
 }
?>

The wsa.bev.gv.at server does not support CORS. If you cannot get a proxy to work you could use the WMS url directly in OpenLayers without the crossOrigin: 'anonymous' option, but you would have tainted canvas and be unable to access pixel data or export or print the image.

  new ImageLayer({
     source: new ImageWMS({
      url: 'https://wsa.bev.gv.at/GeoServer/Interceptor/Wms/CP/INSPIRE_KUNDEN-ddf0f80a-ec58-4138-833d-a773ecd555b6',
      params: {
        'LAYERS': 'CP.CadastralZoning_Zoning,CP.CadastralParcel_Parcel',
        'FORMAT': 'image/png',
        'TRANSPARENT': 'FALSE',
        'BGCOLOR': '0xFFFFFF',
      },
    }),
  })

Dear Mike, Many thanks for Your reply! But I was struggling and was not able to embed your code into my environment. If I take the Network adress produced from your code (F12 in Browser) and replace redirect.php with the correct url (http://wsa.bev.gv.at/GeoServer/...) I get the right png-File from Server. But this does not work out of app. For me it seems that the redirect.php does not work. I dont know what I am doing wrong, perhaps it is because the webside is implemented in Angular? I would be MUCH grateful for any further help, Susanne — Susanne, May 03 '21 at 21:52

CORS blocking ImageWMS access

1 Answers1