HTTP Basic Auth Failure: Esri JS API

Question

I am unable to prompt the Basic Authorization popup to appear using the Esri JS API with a Secured OGC WMS service.

fetch request result

A concise description:

• Using a basic fetch request, with credentials: "include" set, succeeds in displaying native authentication popup.

• Using an esriRequest or a WMSLayer object fails to display the native authentication popup.

I presume this is due to the API not utilizing the credentials: "include" property. I delved into figuring out how to force this with no avail despite a range of attempts (esriConfig.request.interceptors, setting headers manually, attempting with another OGC server, injecting the user/pass), but the API is supposed to handle this without forcing it according to the esri docs.

Code Pen: https://codepen.io/Scesri/pen/LMQgrV?editors=0010

The codepen features the three attempts (fetch, esriRequest, WMSLayer), the popup you see at the start is from the fetch request. Unfortunately this is not appearing for the other two requests.(Filter by "gws" find the requests in the network tab)

• DropTheLattitude: I should also like to note that adding the user/pass via user:[email protected] is stripped out by chrome [developer.mozilla.org/en-US/docs/Web/HTTP/Authentication]
• Bera: Edit your question instead of posting comment if you want to add additional information

Answer 1

Since the ArcGIS API for JavaScript supports IE11, and Fetch is not supported on IE11, I would guess that esriRequest does not use Fetch behind the scenes.

I looked up how this is done for the older XMLHttpRequest - looks like that syntax is withCredentials. Given that, try this:

esriRequest(OGCurl, {
 withCredentials: true
}).then(function (response) {
 // The requested data
 console.log(response);
});