Why is esri/request failing on Firefox, where as working on Chrome?

SurajPatil · ‎11-09-2016

I am trying to read the metadata of published FeatureService from ArcGIS server using esri/request AMD module.
Its working fine on chrome and is returning the list of metadata and layers to read from which i use later to add them on my map.
But surprisingly, the same is failing on Firefox. Here is the net panel screenshot for the request,

The code for request is simple, as following

var allLayerUrl = appConfig.ArcGISFeatureServiceUrl;
               var requestHandle = esriRequest({
                 "url": allLayerUrl,
                 "content": {
                   "f": "json"
                 },
                 "callbackParamName": "callback"
               });
          requestHandle.then(lang.hitch(this,function(resp){
               if(resp.layers){
                    resp.layers.forEach(function(layerInfo){
                         //Do something
                         });
                    }
                }),lang.hitch(this,function(err){
                     //Show error message
                }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-09-2016

Suraj,

I don't have any issue with firefox.

Here is my sample code that runs fine in FF.

<!DOCTYPE html>
<html>
<head>
  <title>Get ArcGIS Server Map Service Layers</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <style>
    body{
      font-family: "Arial Unicode MS, Arial, sans-serif";
    }
    #content {
      width: 800px; height: 350px; padding: 5px; overflow: auto;
      border: solid 2px #AAAAAA; background-color: #FFFFFF;
      -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
      -moz-box-shadow: 0 0 0.5em black; -webkit-box-shadow: 0 0 0.5em black; -o-box-shadow: 0 0 0.5em black; box-shadow: 0 0 0.5em black;
    }
    .failure { color: red; }
    #status { font-size: 12px; }
  </style>

  <script src="http://js.arcgis.com/3.13/"></script>
  <script>
    require(["dojo/dom", "dojo/on", "dojo/dom-class", "dojo/_base/json", "dojo/_base/array", "dojo/string", "esri/request", "dojo/_base/lang", "dojo/domReady!"], function(dom, on, domClass, dojoJson, array, dojoString, esriRequest, lang) {

        dom.byId("url").value = "http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/Geology/MapServer/Layers";
        dom.byId("content").value = "";
        //handle the Go button's click event
        on(dom.byId("submitRequest"), "click", getContent);

        function getContent(){
          var contentDiv = dom.byId("content");
          contentDiv.value = "";
          domClass.remove(contentDiv, "failure");
          dom.byId("status").innerHTML = "Downloading...";

          //get the url and setup a proxy
          var url = dom.byId("url").value;

          if(url.length === 0){
            alert("Please enter a URL");
            return;
          }

          var requestHandle = esriRequest({
            "url": url,
            "content": {
              "f": "json"
            },
            "callbackParamName": "callback"
          });
          requestHandle.then(requestSucceeded, requestFailed);
        }

        function requestSucceeded(response, io){
          var fieldInfo, layerInfo, pad, retval;
          pad = dojoString.pad;

          //toJson converts the given JavaScript object
          //and its properties and values into simple text
          dojoJson.toJsonIndentStr = "  ";
          console.log("response as text:\n", dojoJson.toJson(response,true));
          dom.byId("status").innerHTML = "";

          if ( response.hasOwnProperty("layers") ) {
            layerInfo = array.map(response.layers, function(l) {
              var lDomains = [];
              retval = pad("Layer:", 8, " ", true) + l.name + "\n" + pad("", 104, "-", true) + "\n";
              retval += pad("  Type Field Name:", 20, " ", true) + pad(l.typeIdField, 25, " ", true) + "\n";
              fieldInfo = array.map(l.fields, lang.hitch(this, function(f) {
                if(f.domain){
                  lDomains.push(pad("  Name", 10, " ", true) + pad(f.domain.name, 25, " ", true) +
                                pad("Type", 8, " ", true) + pad(f.domain.type, 25, " ", true));
                }
                return pad("Field:", 8, " ", true) + pad(f.name, 25, " ", true) +
                  pad("Alias:", 8, " ", true) + pad(f.alias, 30, " ", true) +
                  pad("Type:", 8, " ", true) + pad(f.type, 25, " ", true);
              }));
              if (lDomains.length > 0){
                retval += pad("  Domains:", 12, " ", true) + "\n" + pad("  ", 102, "*", true) + "\n";
                retval += lDomains.join("\n") + "\n" + pad("  ", 102, "*", true) + "\n";
              }
              return retval += fieldInfo.join("\n") + "\n" + pad("", 104, "-", true) + "\n\n";
            });
            dom.byId("content").value = layerInfo.join("\n");
          }else{
            dom.byId("content").value = "No layers found. Please double-check the URL.";
          }
        }

        function requestFailed(error, io){
          domClass.add(dom.byId("content"), "failure");
          dojoJson.toJsonIndentStr = " ";
          dom.byId("content").value = dojoJson.toJson(error, true);
        }
    });
  </script>

</head>
<body>
  <p>Enter the URL for a layer in a map service to access metadata about a layers in a map service using esriRequest.</p>
  <p>
    <input type="text" id="url" size="105"/>
    <input id="submitRequest" type="button" value="GO" />
    <span id="status"></span>
  </p>
  <p>
    <h2>Content</h2>
    <p>Check the console for the full response. Here we'll display Layer Name, Type Field Name, Field names, aliases and types:</p>
    <textarea id="content"></textarea>
  </p>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍