Web-GIS cannot display WMS data because of CORS header ‘Access-Control-Allow-Origin’ missing

Question

I have an OpenLayers application in a secured connection (with apache2 and port 443) in a machine A and I want to display data from a GeoServer WMS which it exists in a machine B with insecured connection (with Tomcat 8 and port 8080). But while WMS server is CORS enabled (it serves the same layers in other web-GIS applications), browser console raises the popular error: CORS header ‘Access-Control-Allow-Origin’ missing. The weird thing is that the corresponding getLegend service of each layer works fine.

Here is my code for layer definition:

var serverNameType = 'geoserver';
var serverLink = 'http://<domain>:8080/geoserver/wms';


var tmpInfo = new Array(
              {
                        layerName: "<workspace:<layername>",
                        altLayerName: "<workspace:<layername>",
                        hasIdentifyInfo: true,
                        crossOrigin: 'anonymous',
                        legendName: getTranslation(lang, "Layer title"),
                        legendSrc: serverLink + "?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=<workspace:<layername>&legend_options=fontName:Times%20New%20Roman;fontAntiAliasing:true;fontColor:0x000033;fontSize:14;bgColor:0xf0f8fb;dpi:180"
              }
      );

for(var i = 0; i < LayerControl.layerControls.length; ++i)
      {
                LayerControl.layerControls[i].addLayer(
                        new Layer(
                                tmpInfo[i].layerName,
                                new ol.layer.Tile({
                                          source: new ol.source.TileWMS({
                                                    preload: Infinity,
                                                    url: serverLink,
                                                    serverType: serverNameType,
                                                    crossOrigin: "anonymous",
                                                    params: {
                                                              'LAYERS': tmpInfo[i].layerName, 'TILED': true
                                                    }
                                          }),
                                          visible: false
                                }),
                                tmpInfo[i].hasIdentifyInfo, tmpInfo[i].legendName, tmpInfo[i].legendSrc
                                )
                        );

Why is this happening ? Is it possible to fix it in front-end level ?

Answer 1

Finally, I tried to solve the issue on server side. I believed that my WMS server was CORS enabled because it serves other GIS applications / machines but I was wrong.

I enabled it adding in /var/lib/tomcat8/webapps/geoserver/WEB-INF/web.xml file the following (source: https://docs.geoserver.org/latest/en/user/production/container.html#enable-cors):

<!-- CORS enabled -->
<filter>
  <filter-name>cross-origin</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
<param-name>cors.allowed.origins</param-name>
  <param-value>*</param-value>
</init-param>
<init-param>
  <param-name>cors.allowed.methods</param-name>
  <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
</init-param>
<init-param>
  <param-name>cors.allowed.headers</param-name>
  <param-value>*</param-value>
</init-param>
</filter>

<filter-mapping>
  <filter-name>cross-origin</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

<!--               -->

and the problem solved. Now I'm wondering why the other GIS applications displayed the data from the same WMS server without a CORS origin header but that is a different question :-)