我正在尝试从我的localhost中的Geoserver实例添加WFS层时遇到很多困难 . 我正在关注OpenLayers网站a-la-lettre的原始示例，只是更改了URL值 . 这是代码：

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="OpenLayers-v4.1.1/ol.css" type="text/css"> 
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="OpenLayers-v4.1.1/ol.js" type="text/javascript"></script> 
    <title>OpenLayers Map</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'http://localhost/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:Communes&outputFormat=application%2Fjson',
        strategy: ol.loadingstrategy.bbox
      });

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

      var map = new ol.Map({
        layers: [vector],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [30.158, -1.993],
          maxZoom: 19,
          zoom: 12
        })
      });
      map.zoomToMaxExtent();
    </script>
  </body>
</html>

问题是我的 Map 是空的 . 我只获得ZoomIn / ZoomOut控件 . 通过Google搜索问题，我看到了通过在Geoserver-root / WEB_INF / web.xml中添加以下代码解决的跨站点请求问题：

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

但是，这并没有解决我的问题 . 任何人都可以给我提示我缺少的东西吗？

openlayers-3 geoserver