Using Proxy with JavaScript API 4.0

[JoshuaTanner2]

Has anybody tried using the proxy to access a secure service with the 4.0 JavaScript API?  When I use the proxy, I can see in my network traffic that it is properly accessing the service, but nothing is displayed on the map.  This indicates the proxy is working fine, but the API isn't then adding the result to the map.  I tried with both username/password, and token in my proxy.

The code is pretty boilerplate, but here it is if interested:

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/core/urlUtils",
      "esri/config",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer, urlUtils, esriConfig) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 10,
        center: [-122.668872, 45.511788]
      });

      urlUtils.addProxyRule({
        proxyUrl: '.<<path to proxy>>',
        urlPrefix: '<<baseurl to use proxy>>'
      });

      var featureLayer = new FeatureLayer({
        url: "<<secure feature service>>"
      });

      map.add(featureLayer);

I had to switch back to 3.16, which used the proxy and added the layer perfectly.  Oddly enough, if I signed into ArcGIS Server in the same browser, the service would display fine in my 4.0 app.

[KellyHutchins]

I ran a quick test using the Esri World Traffic service which requires a proxy and it worked for me. (Edited post to update sample to use secure service url example)

      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/core/urlUtils",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer, urlUtils) {




      urlUtils.addProxyRule({
        proxyUrl: "../resource_proxy/proxy.php",
        urlPrefix: "services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Starbucks_Locations"
      });


      var map = new Map({
        basemap: "streets"
      });


      var layer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Starbucks_Locations/FeatureServer/..."
      });


      map.add(layer);

[JoshuaTanner2]

I was able to get it to work by specifying my own renderer (see below).  For some reason, it would not render the square marker that I had defined on the service.  Any idea what might be causing the issue?  I can mark the solution below as a correct answer, but it still doesn't determine the underlying issue.

[KellyHutchins]

Any errors in the dev console? Can you send me the drawing info from the service? You can find it in the rest services directory for that service.

[JoshuaTanner2]

I think you're on to something.  The drawing info is a symbol (image) which is just a red square.  In the v3 API, the imageData field is used to put the base64 image symbol on the map.  In v4, it would appear that it is using the url and trying to send a separate request back to ArcGIS Server to get the image.  This request to get the image is what's causing the issue, as it is not sent through the proxy.  No errors are thrown in the dev console, but when I look at the network I see the un-proxied request to retrieve the image that is responding with the redirect URL to sign in.  Does that make sense?

[KellyHutchins]

Might be a bug. I'll pass the info along to the dev team but it would be great if you could contact Esri Support and submit a bug for this problem.

[JoshuaTanner2]

Thanks for helping look at this.  I'll submit a ticket with Esri to see if it's a possible bug, or something on my end.

[JoshuaTanner2]

Kelly, I was able to get it to work fine adding a secure layer from ArcGIS Online, with a clientID and cilentSecret in the proxy.  However I was still not seeing the results on my map using the secure layer from ArcGIS Server.  It turns out, the points were being added, but they just didn't know how to render.  The points were simple square markers and not picture icons.  In Firefox and Chrome, nothing was showing up.  In IE, I was able to notice very, very tiny markers with an 'x' in them.  It's almost like it was trying to find an image marker but nothing was showing up in the network traffic.  My solution was just to define a renderer for the feature layer and not rely on the default symbology from the service:

featureLayer.renderer = new SimpleRenderer({
  symbol: new SimpleMarkerSymbol({
    size: 6,
    color: "black",
    outline: {
      width: 0.5,
      color: "white"
    }
  })
});

Adding the renderer worked and the points are now showing up.  I'm using ArcGIS Server 10.3 with a secure service accessed through a .net proxy with username and password.