[SOLVED] WFS with GeoServer

[kalyncoose]

I read the documentation for vector-source and I am having trouble implementing the WFS with GeoServer example.

In my template, I have:

<vl-layer-vector>
        <vl-source-vector :url="urlFunction" :strategy-factory="loadingStrategyFactory"></vl-source-vector>
</vl-layer-vector>

In my script, I have:

import { loadingBBox } from 'vuelayers/lib/ol-ext'

export default {
  name: 'Map',
  data () {
    return {
      zoom: 18,
      center: [-87.85556983391876, 42.64611561530228],
      rotation: 0
    }
  },
  methods: {
    urlFunction (extent, resolution, projection) {
      return 'http://localhost:8080/geoserver/uwp/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=uwp:footways&' +
          'outputFormat=application/json&srsname=' + projection + '&' +
          'bbox=' + extent.join(',') + ',' + projection
    },
    loadingStrategyFactory () {
      // VueLayers.olExt available only in UMD build
      // in ES build it should be imported explicitly from 'vuelayers/lib/ol-ext'
      return loadingBBox
    },
  },
}

When I put the feature request into my browser, I receive the correct XML data from the GeoServer.

Edit: I was having a CORS issue. I followed this answer and got it to work!

Solution:

1. Shutdown GeoServer if it is currently running
2. Go to your GeoServer installation directory
3. Find webapps/geoserver/WEB-INF folder
4. Open web.xml
5. CTRL/CMD+F and type "CORS"
6. Press enter, uncomment code blocks for Jetty to enable CORS
7. There are two blocks to uncomment for Jetty, make sure to get both
8. Start the GeoServer up again and CORS will be enabled!

[joaobernardo21]

This is Wrong