Implementing WebAtlas_DE is failing due to Content-Type

Question

I am trying to implement the German WebAtlas_DE.light WMS into one of our applications using the ArcGIS JS api.

The scenario is to load it in tandem when the dark-gray basemap is loaded. We have already implemented this with another WMS:

startup: function() {
    var self = this;
    this.dtk25 = new WMSLayer("http://sg.geodatenzentrum.de/wms_dtk250");
    this.dtk25.on("load", function(i) {
        var visibleLayers = self.dtk25.layerInfos.map(function(x) {
            return x.name;
        });
        self.dtk25.visibleLayers = visibleLayers;
    });
},

This is a snippet from our BaseMapManager widget, that handles all basemap configurations. When we call the satellite base map, the dtk25 layer is loaded as well. Trying the same with http://sg.geodatenzentrum.de/wmts_webatlasde.light however fails.

I've noticed that the Content-Type of the call to GetCapabilities is application/xml for dtk25 and application/vnd.ogc.wms_xml for the WebAtlas_de.light.

Using the Chrome Dev Tools I can replay that GetCapabilities call for http://sg.geodatenzentrum.de/wms_webatlasde.light?SERVICE=WMS&REQUEST=GetCapabilities and it downloads a file instead of opening it.

Printing the WMSLayer object to the console, after I've tried to load it, reveals a loadError-property:

"GetCapabilities request for http://sg.geodatenzentrum.de/wms_webatlasde.light failed. (Response is null.)"

What am I doing wrong here?

Answer 1

I found a solution to my problem - finally. I was halfway down my way to write my own transparent proxy service, just to change to Content-Type of the response, when I found out, that ESRI themselfs are providing just that under https://github.com/Esri/resource-proxy

I rolled this onto our IIS, and modified the web.config, to allow for CORS (otherwise integration tests would fail, but production would work, since both applications are on the same server and domain):

<system.webServer>
 <httpProtocol>
   <customHeaders>
     <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Methods" value="*" />
      <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
   </customHeaders>
 </httpProtocol>
</system.webServer>

After this, edit the config:

<?xml version="1.0" encoding="utf-8" ?>
<ProxyConfig allowedReferers="*"
             mustMatch="true">
    <serverUrls>
        <serverUrl url="https://sg.geodatenzentrum.de/wms_webatlasde__xxxxxxx-xxxx-xxxx"
                    matchAll="true" />

    </serverUrls>
</ProxyConfig>

And finally in code add the following before try to load the WMSLayer:

urlUtils.addProxyRule({
  urlPrefix: "sg.geodatenzentrum.de",
  proxyUrl: "http://xxx.xxxxxxx.de/resource-proxy/proxy.ashx"
});