I am still working to get my GeoServer WFS displayed in my Leaflet map and cannot get the Ajax response to work properly. I have already run the "getFeature" request in my browser and it returned json as the output. I have also enable jsonp in the web.xml file to avoid cross-origin issues (I'm not using CORS). There appeared to be a problem initially with using dataType: 'jsonp' in my ajax request, and it was recommend that I switch it to json (which I did). Now I am getting the message XMLHttpRequest cannot load http://localhost:8080/geoserver/ows... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. Seeing as I cannot set the response.addHeader() in GeoServer(at least I don't know how to do that), what is my recourse to solve this issue? Note: it was recommended that I use outputFormat: 'text/javascript' instead of application/json and that I use jsonpCallback: 'parseResponse' instead of getJson. Is that correct? Below is my current code:

var url = 'http://localhost:8080/geoserver/ows'; 

var defaultParameters = {
  service: 'WFS',
  version: '1.1.0',
  request: 'GetFeature',
  typeName: 'FGCMS:1_Deg_Grid_polygon',
  //maxFeatures: 200,
  outputFormat: 'text/javascript',
  format_options: 'callback:getJson',
  SrsName : 'EPSG:4326'

var parameters = L.Util.extend(defaultParameters);
var URL = url + L.Util.getParamString(parameters);

var WFSLayer = null;
var ajax = $.ajax({ 
  url: URL,
  dataType: 'json',
  jsonpCallback: 'parseResponse',
  //async: false, 
  success: WFSLayer,        
  error: function() { console.log('Oh snap!'); }

function WFSLayer(data) {
  L.geoJson(data, {
    style: function (feature) {
    return {color: 'black'}
  • Just to be clear, I am not using CORS (I actually added the CORS extension to my browser but that didn't seem to help; it's not currently set to 'enable'). I am also not able to use the <iframe> option discussed in that article. Any configuration of the headers for the server-side would have to be done via the GeoServer admin, and I just don't see how to do that. I've seen that a proxy server could be used, but it just seems like there has to be a easier way to get a simple WFS layer into a Leaflet map without having to do another extraneous step. – gwydion93 Jul 1 '16 at 19:38
  • Ah, maybe try this: crossorigin.me – Kirk Kuykendall Jul 1 '16 at 19:40
  • I tried the crossorigin proxy tool you recommended (I added the crossorigin.me to the front of my GetFeature request), but I am still getting the following error; what gives: XMLHttpRequest cannot load http://crossorigin.me/http://localhost:8080/geoserver/ows?service=WFS&versi…t=application%2Fjson&format_options=callback%3AgetJson&SrsName=EPSG%3A4326. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – gwydion93 Jul 5 '16 at 13:00
  • I was able to semi-solve this issue by installing the CORS extension in my browser. I got a success response in my console log and the WFS is showing in my app, albeit a little wonky (but that;s a separate issue). I am still wondering why I couldn't get the jsonp fix to work, but thatnks for the recommendation. – gwydion93 Jul 6 '16 at 20:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.