Using WFS layer in OpenLayers 6.4

Question

I'm trying to show a polygon feature and an OSM basemap from my geoserver using WFS and openlayers

1. layer name: utmzones
2. Native SRS: EPSG:4326
3. workspase name: utmzone (WFS service enabled)
4. Namespace URI: www.hamid1.com(not exsist really!)
5. geoserver url: localhost:8080/geoserver

Using the code mentioned below the OSM layer is shown in the browser but I can't see the polygon layer.

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import {all} from 'ol/loadingstrategy';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import OSM from 'ol/source/OSM';
import {Stroke, Style} from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    return (
      'http://localhost:8080/geoserver/wfs?service=WFS&' +
      'version=1.0.0&request=GetFeature&typename=utmzone:utmzones&' +
      'outputFormat=application/json&srsname=EPSG:4326&' +
      extent.join(',') +
      ',EPSG:4326'
    );
  },
  strategy:all,
});

var vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2,
    }),
  }),
});


var raster =new TileLayer({
    source: new OSM(),
  });

var map = new Map({
  layers: [raster, vector],
  target: document.getElementById('map'),
  view: new View({
    center: [0 , 0],
    maxZoom: 19,
    zoom: 1,
  }),
});

Everytime the map loads, this message shows up in geoserver log:

24 Oct 20:46:04 INFO [geoserver.wfs] -
Request: getServiceInfo
24 Oct 20:46:04 INFO [geoserver.wfs] -
Request: getFeature
    service = WFS
    version = 1.0.0
    baseUrl = http://localhost:8080/geoserver/
    query[0]:
        srsName = EPSG:4326
        typeName[0] = {www.hamid1.com}utmzones
    outputFormat = application/json
    resultType = results
24 Oct 20:46:04 INFO [wfs.json] - about to encode JSON

It seems that geoserver recieves the request and the response has been sent but I can't see the feature on the web map.

The feature can be seen by WMS but there is the same problem using gefeatureinfourl

I was wondering if anybody could help me with this problem.

Answer 1

finally i found the main problem After running the web page, the following message was displayed in the browser console, and i was unaware

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/geoserver/rest/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). and it resolved by Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/geoserver/rest/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

and it resolved by uncommenting crossOrigin lines in web.xml file in geoserver directiory this page helped me:

https://docs.geoserver.org/latest/en/user/production/container.html