[GIS] ESRI proxy page not working properly + CORS + cross domain scripting

arcgis-javascript-apiarcgis-servercorsjavascriptPROXY

I have set up a proxy page. I am using JSP version of proxy page. I have set up a server URL which will point to my Java. When I load the my page which the proxy URL has set in its html it will work fine only in IE but not in Mozilla or Chrome.

Even in IE it will work only if I use localhost, but if I use my IP then it won't work.

In Chrome I get: Origin http://<localhost> is not allowed by Access-Control-Allow-Origin.

In Mozilla when I check the response I get the login page for the REST services.

Is this issue related to cross domain or what?

I haven't checked to see if my proxy is working; my question is how do I check it. I think it should be working since in IE when I use localhost instead of my IP it works fine.

In Mozilla in Firebug when I check I see the response is the login page for REST service.

I am running my proxy server in my Websphere which is running in port 9080; my web server is Apache HTTP server which is running on port 80 and my ArcGIS server is running in another machine on port 6080.

Proxy server : WebSphere
proxy url : localhost:9080/proxy/proxy.jsp
web server : apache
web server url : localhost
Arcgis server:<some-ip>:6080

Below is more complete code:

<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer On Demand</title> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>
    <script src="http://js.arcgis.com/3.6/"></script> 
    <script> 
      var map,featureLayer;
      require(["dojo/on", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/InfoTemplate", "esri/layers/FeatureLayer",
               "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic",
               "dojo/parser", "dojo/domReady!"
      ], function(
        on,Map, ArcGISDynamicMapServiceLayer, InfoTemplate, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic,  
        parser
      ) {
        parser.parse();
        esri.config.defaults.io.proxyUrl = "http://localhost:9080/proxy/proxy.jsp";
        var initExtent = new esri.geometry.Extent({"xmin":-21744805.806561172,"ymin":-4911537.689490959,"xmax":3302079.6219187006,"ymax":13090911.21222895,"spatialReference":{"wkid":102100}});

        map = new Map("mapDiv", { 
          extent: initExtent        
        });

        var WorldCountries = new ArcGISDynamicMapServiceLayer("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_ESRI_WGS84/MapServer");
        WorldCountries.setDisableClientCaching(true);
        WorldCountries.setOpacity(0.75);

        map.addLayer(WorldCountries);
        showCountries();
        map.on("load", initOperationalLayer);

        function initOperationalLayer() {
         featureLayer = new FeatureLayer("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_ESRI_WGS84/MapServer/0",{
            mode: esri.layers.FeatureLayer.MODE_SELECTION,
          outFields: ["*"],
          opacity: 0.75
          });

          var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
          featureLayer.setSelectionSymbol(sfs); 

          map.addLayer(featureLayer);
          map.infoWindow.resize(250,350);

          on(map,"click", function(evt){

                requestData(evt);
                /*var query = new esri.tasks.Query();
                query.geometry = evt.mapPoint;
                featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW, function (features){
                    map.infoWindow.setTitle("Country Information");
                    map.infoWindow.setContent("Country Name: " + features[0].attributes.COUNTRY);
                    map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
                });*/
            });
        }


      });

      function showCountries(){
            var queryTask = new esri.tasks.QueryTask("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_ESRI_WGS84/MapServer/0");
            //build query filter
                console.log(" showCountries");
                        var query = new esri.tasks.Query();
                        query.returnGeometry = true;
                        query.maxAllowableOffset=calcOffset();
                        query.where = "CNTRY_NAME IN ('India','Brazil','Italy','Australia','France','Libya','Russia','Ukraine','United States','Canada','Zimbabwe','Zambia','Yemen','Vietnam','Venezuela','Vanuatu','Uzbekistan','Uruguay','United States Minor Outlying Islands','United Kingdom','United Arab Emirates','Uganda','Tuvalu','Turks and Caicos Islands','Turkmenistan','Tajikistan','Turkey','Tunisia','Trinidad & Tobago','Tonga','Togo','Timor-Leste','Turkmenistan','Thailand','Tanzania','Palestinian Territory','Panama','Papua New Guinea','Paraguay','Poland','Portugal','Qatar','Romania','Greenland','Mexico','South Africa','South Korea','Spain','Sudan','Sri Lanka','Switzerland','Sweden','St. Vincent & the Grenadines','St. Pierre & Miquelon','Singapore','Indonesia','Colombia','Congo, DRC','Cook Is.','Costa Rica','Croatia','Cyprus','Czech Republic','Cameroon','Democratic Republic of the Congo','Antarctica','Armenia','Austria','North Korea','Romania','Rwanda','Norway','Monaco','Mauritania','Mauritius','Madagascar','Isle of Man','Iceland','Hungary','Germany','Antigua & Barbuda','Azerbaijan','Barbados','Belarus','Belgium','Bermuda','Bhutan','Bosnia & Herzegovina','British Indian Ocean Territory','British Virgin Is.','Central African Republic','Chad','Chile','Christmas I.','Egypt','Ethiopia','Finland','Vatican City','Western Sahara','Syria','Pakistan','Guyana','Mongolia','Nepal','Palau','Jamaica','Italy','Isreal','Fiji','Bermuda','Bhutan','Bolivia','The Bahamas','The Gambia','Montserrat','Mozambique','Morocco','Moldova','Kazakhstan','Myanmar','Sudan','Argentina','Bolivia','Algeria','Niger','Mali','Bolivia','Saudi Arabia','Botswana','Angola')";
                        query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
                        //query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
                        var spRef = new esri.SpatialReference({wkid : 102100});
                        query.outSpatialReference = spRef; // Doesn't work  
                        //query.outSpatialReference = map.spatialReference; // Doesn't work either
                        infoTemplate = new esri.InfoTemplate("Alert", "Alert for Re-insurance");
                        console.log(" infoTemplate "+infoTemplate);
                        dojo.connect(queryTask, "onComplete", function(featureSet) {
                                try{
                                    console.log(" query complete");
                                    var symbol0 = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255, 0, 0, 0.9]));
                                    dojo.forEach(featureSet.features,function(feature){
                                        //alert('feature'+feature);
                                        var graphic = feature;
                                        graphic.setSymbol(symbol0);
                                        //alert("infoTemplate"+infoTemplate);
                                        graphic.setInfoTemplate(infoTemplate);
                                        //alert("graphic"+graphic);
                                        //alert("map.graphics"+map.graphics);
                                        map.graphics.add(graphic);
                                    });
                            }catch(e){
                              alert("e"+e);
                            }
                        });
      queryTask.execute(query);
      }

      function requestData(evt){
            try{
                console.log(" request data");
                dojo.xhrGet({
                    url: "http://earthquake.usgs.gov/earthquakes/feed/geojson/1.0/week",
                    handleAs: 'json',
                    load: function(data){ 
                          var query = new esri.tasks.Query();
                            query.geometry = evt.mapPoint;
                            featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW, function (features){
                                map.infoWindow.setTitle("data[0].properties.place");
                                map.infoWindow.setContent("data[0].properties.mag");
                                map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
                            });
                    },
                    error: dojo.hitch(this, "failure")
                });
            }catch(e){
               console.log(e);
            }
      }

      function showData(){
        console.log("in showdata");
      }

      function failure(){
       console.log("failed");
      }


      function calcOffset() {
  return (map.extent.getWidth() / map.width);
  // console.log('extent changed...maxOffset: ', globals.maxOffset);
}
    </script> 
  </head> 
  <body class="claro"> 
    <div id="mapDiv">
    </div>
  </body> 
</html>

Best Answer

Try to add a response header for:

Access-Control-Allow-Origin: *

in your proxy page.

Related Question