CORS problem when trying to call WMS getFeatureInfoUrl using OpenLayers

Question

I'm using the newest stable version of OpenLayers which is 6.3.1.

I have a problem when trying to call http request on an url genereted by the wmsSource.getFeatureInfoUrl function. It returns me an URL and when I execute this url directly on the newly opened tab on my browser I get the detailed result about the cliecked point on a map. But when my Angular app is calling this url I have a CORS error:

Access to XMLHttpRequest at 'http://q1.geopartner.ad/cgi-bin/qgis_mapserv.fcgi?map=/qgisdata/projekty/Q_postD.qgz&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=dzialki&LAYERS=dzialki&INFO_FORMAT=text%2Fhtml&I=126&J=31&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=2035059.4410645328%2C6966165.009797823%2C2074195.1995465432%2C7005300.768279833' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My url won't be available for you cause it's only available behind the VPN connection. Here is my code:

const wmsSource = new TileWMS({
  url: 'http://q1.geopartner.ad/cgi-bin/qgis_mapserv.fcgi?map=/qgisdata/projekty/Q_postD.qgz',
  params: { LAYERS: 'dzialki' }
});

const wmsLayer = new TileLayer({
  source: wmsSource
});

const view = new View({
  center: [ 2071206.0066185605, 6997895.536649533 ],
  zoom: 10,
});

const map = new Map({
  layers: [wmsLayer],
  target: 'map',
  view
});

map.on('singleclick', function(evt) {
  document.getElementById('info').innerHTML = '';

  const viewResolution = view.getResolution();
  const viewProjection = view.getProjection();

  console.log('viewProjection', viewProjection);

  const url = wmsSource.getFeatureInfoUrl(
    evt.coordinate,
    viewResolution,
    viewProjection,
    { INFO_FORMAT: 'text/html' });

  if (url) {
    console.log('url', url);

    const Http = new XMLHttpRequest();
    Http.open('GET', url);
    Http.send();

    Http.onreadystatechange = (e) => {
      console.log(Http.responseText);
    };
  }
});

The map is loading correctly, I can zoom in/out etc. And when I click on the map I have the problem which I described. How can I fix it?

Answer 1

If you do not have access to the WMS server where you get your link you can accomplish this by creating a Node.js server that handles the WMS calls. Here you can allow CORS by adding this to the header:

  res.setHeader("Access-Control-Allow-Origin", "*");

Then you can send call to the WMS service from this Node.js backend. Here I got a request parameter with that contains the link to the WMS in mapUrl. Just run the code underneath as a Node.js project and then send your WMS request to:

http://localhost:3030/map/http://q1.geopartner.ad/cgi-bin/qgis_mapserv.fcgi?map=/qgisdata/projekty/Q_postD.qgz

const express = require("express");
const request = require("request");

const app = express();

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

app.get("/map/*", (req, res) => {
  var fullUrl = req.protocol + "://" + req.get("host") + req.originalUrl;
  var mapUrl = fullUrl.substring(26, fullUrl.length);
  request(
    {
      url: mapUrl
    },
    (error, response, body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).json({ type: "error", message: error.message });
      }
      console;

      res.json(JSON.parse(body));
    }
  );
});


const PORT = process.env.PORT || 3030;
app.listen(PORT, () => console.log(`listening on ${PORT}`));

Answer 2

No 'Access-Control-Allow-Origin' header is present on the requested resource

So you need to set one in Apache for your WMS service, by adding the below line to your config:

Header set Access-Control-Allow-Origin "*" 

See https://enable-cors.org/server_apache.html for further details