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 ?
crossOrigin: "anonymous"
in the TileWMS options unless you wish to access the map canvas a pixel level.