I try to access a layer from GeoServer and display on openlayers by the example here: https://openlayers.org/en/v3.20.1/examples/getfeatureinfo-tile.html
Here is the code I'm trying to access:
<!DOCTYPE html>
<html>
<head>
<title>WMS GetFeatureInfo (Tile Layer)</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script>
var wmsSource = new ol.source.TileWMS({
url: 'http://localhost:10000/geoserver/ADMINISTRATIE/wms',
params: {'LAYERS': 'ADMINISTRATIE:pdf',
'STYLES':'TEREN',
tiled:true,
transparent: true },
serverType: 'geoserver',
crossOrigin: 'anonymous'
});
var wmsLayer = new ol.layer.Tile({
source: wmsSource
});
var view = new ol.View({
center: [0, 0],
zoom: 1
});
var map = new ol.Map({
layers: [wmsLayer],
target: 'map',
view: view
});
map.on('singleclick', function(evt) {
document.getElementById('info').innerHTML = '';
var viewResolution = /** @type {number} */ (view.getResolution());
var url = wmsSource.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, 'EPSG:3857',
{'INFO_FORMAT': 'text/html'});
if (url) {
document.getElementById('info').innerHTML =
'<iframe seamless src="' + url + '"></iframe>';
}
});
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.forEachLayerAtPixel(pixel, function() {
return true;
});
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
And the error I encounter is the following:
Access to image at 'http: // localhost: 10000 / geoserver / ADMINISTRATIE / wms? SERVICE = WMS & VERSION = 1.3.0 & REQUEST = GetMap & FORMAT = image% 2Fpng & TRANSPARENT = true & LAYERS = ADMINISTRATIE% 3Apdf & STYLES = TEREN & tiled6 W & S = = transparent & true % 3A3857 & BBOX = -20037508.342789244% 2C0% 2C0% 2C20037508.342789244 'from origin' http: // localhost 'has been blocked by CORS policy: No' Access-Control-Allow-Origin 'header is present on the requested resource.
10000 / geoserver / ADMINISTRATION / WMS? SERVICE = WMS & VERSION = 1.3.0 & REQUEST = GetMap & FORMAT = image% 2Fpng & TRANSPARENT = true & LAYERS = ADMINISTRATION% 3Apdf & STYLES = LAND & tiled = true & Transparent = true & width = 256 & height = 256 & CRS = EPSG% 3A3857 & BBOX = -20,037,508.342789244% 2C0% 2C0% 2C20037508.342789244: 1 GET http: // localhost: 10000 / geoserver / ADMINISTRATIE / wms? SERVICE = WMS & VERSION = 1.3.0 & REQUEST = GetMap & FORMAT = image% 2Fpng & TRANSPARENT = true & LAYERS = ADMINISTRATIE% 3Apdf & STYLES & true & TY & true & tY 25 EPSG% 3A3857 & BBOX = -20037508.342789244% 2C0% 2C0% 2C20037508.342789244 net :: ERR_FAILED
Image (async)
nx @ ol.js: 719
k.load @ ol.js: 646
jg @ ol.js: 124
k.fl @ ol.js: 387
setTimeout (async)
k.Zo @ ol.js: 392
(anonymous) @ ol.js: 378
requestAnimationFrame (async)
k.render @ ol.js: 389
k.Tk @ ol.js: 389
b @ ol.js: 15
Na.b @ ol.js: 18
Va @ ol.js: 20
k.set @ ol.js: 20
k.I @ ol.js: 21
I @ ol.js: 380
(anonymous) @ test.php: 33
test.php: 1 Access to image at 'http: // localhost: 10000 / geoserver / ADMINISTRATIE / wms? SERVICE = WMS & VERSION = 1.3.0 & REQUEST = GetMap & FORMAT = image% 2Fpng & TRANSPARENT = true & LAYERS = ADMINISTRATIE% 3Apdf & STYLES = true & true 256 & HEIGHT = 256 & CRS = EPSG% 3A3857 & BBOX = 0% 2C0% 2C20037508.342789244% 2C20037508.342789244 'from origin' http: // localhost 'has been blocked by CORS policy: No' Access-Control-Allow-Origin 'header is present on the requested resource.
