CODEWITHSUNDEEP
javascriptajaxextjs
davids182009
davids182009

Reputation: 451

ExtJs Ajax request to geoserver

I have an app in ExtJs, and I want to send a request to a geoserver server, when consult the url in the browser this is displayed correctly, but when I do the request in my app appears this error in the browser. I'm doing a CQL filter to obtain a BBOX operation on the request, what can i do to solve it?..

enter image description here

"XMLHttpRequest cannot load http://.../geoserver/.../wms?VERSION=1.1.0&SERVICE…3C/coordinates%3E%3C/Envelope%3E%3C/BBOX%3E%3C/Filter%3E&_dc=1435334851353. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access."

This is the code:

dragBox.on('boxend', function(e) {
        if (capaActiva != null) {
            var info = [];
            var extent = dragBox.getGeometry().getExtent();
            var ext = extent.toString().split(',');
            var ext1 = ext[0].toString()+','+ext[1].toString();
            var ext2 = ext[2].toString()+','+ext[3].toString();
            var source = capaActiva.getSource();
            var idCapa = capaActiva.n.id;
            var nombreCapa = capaActiva.n.source.b.LAYERS;
            var controladorUbicar = aplicacion.getController("ControlUbicar");
            var capaBuscarM =  controladorUbicar.buscarcapa(idCapa);
            var urlCapa = capaBuscarM.n.source.d[0];
            var urlServer1 = urlCapa+'VERSION=1.1.0&SERVICE=WFS&REQUEST=GetFeature&TYPENAME='+nombreCapa;
            var urlServer2 = '&Filter=<Filter><BBOX><PropertyName>sigcorpoguajira:GEOM</PropertyName><Envelope%20srsName='+"'EPSG:3857'"+'><coordinates>';
            var urlServer3 = ext1+' '+ext2+'</coordinates></Envelope></BBOX></Filter>';
            var urlServer = urlServer1+urlServer2+urlServer3;
            console.log(urlServer);


            Ext.getBody().mask("Consultando Selección");

            Ext.Ajax.request({
                url : urlServer,
                method : 'GET',
                success : function(response, opts){

                    var respuestaTexto = response.responseText;
                    console.log(respuestaTexto);

                        Ext.getBody().unmask();
                },
                failure :  function(res, opt) {
                    console.log(" Fallo Respuesta ");
                    Ext.getBody().unmask();
                }
            });

Upvotes: 0

Views: 169

Answers (1)

Greendrake
Greendrake

Reputation: 3734

You are having a CORS issue.

If you have access to the geoserver and can adjust its response headers, add this header:

Access-Control-Allow-Origin: *

and also add this to your AJAX request config:

headers: {
    'Access-Control-Allow-Origin': '*'
}

See this thread for more details.

If you don't have access to the geoserver, see if they support JSONP, in which case use Ext.data.JsonP instead of Ext.Ajax.

Upvotes: 1

Related Questions