How to add a OGC WMS layer to application using Javascript API 4.12

[PieterHoltzhausen1]

I am trying to load the WMS layers into my JavaScript application, but I get a "failed to fetch” error message.

Her is my js code to just display the resource in an empty map:

      require([

        "esri/Map",

        "esri/views/MapView",

        "esri/layers/WMSLayer"

      ], function(Map, MapView, WMSLayer) {

        var layer = new WMSLayer({

          url:

            "http://apollo.cdngiportal.co.za/erdas-iws/ogc/wms/CDNGI_PORTAL_BACKDROP?",

          sublayers: [

            {

              name: "CDNGI_2mil_Mosaic"

            }

          ]

        });

        var map = new Map({

          layers: [layer]

        });

        var view = new MapView({

          container: "viewDiv",

          map: map,

          spatialReference: 4326,

        });

      });

Any guidance would be much appreciated,

Pieter

[DavidTshamussa]

i'm facing same issue. any response from the community please.

[FC_Basson · Accepted solution]

The API is forcing the request to the WMS service to be HTTPS, but the NGI server is not providing SSL connections yet.  You must redirect the request through a proxy as described in the Proxy pages with the API | ArcGIS API for JavaScript 4.13 

For the NGI server you can add this to your code:

urlUtils.addProxyRule({
    urlPrefix: "http://apollo.cdngiportal.co.za/erdas-iws/ogc/wmts",
    proxyUrl: "https://<server>/proxy"
 });‍‍‍‍

So you'll need to setup the proxy page (if you don't have one yet, which you can configure).  Use the GitHub examples: GitHub - Esri/resource-proxy: Proxy files for DotNet, Java and PHP.