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)
                        new Layer(
                                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 ?

  • 1
    For a front-end workaround you do not need crossOrigin: "anonymous" in the TileWMS options unless you wish to access the map canvas a pixel level.
    – Mike
    Feb 27 '21 at 13:12
  • Thank you for your comment @Mike . I know, I added it as one of my trial and error attempts to solve the problem but without success.
    – Capdi
    Mar 1 '21 at 5:34

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 -->


<!--               -->

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 :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.