How to access webmap in ArcGIS Portal from Angular app on localhost

Question

I'm testing an Angular CLI application that's running on my PC at http://localhost:4200 and which needs to access a webmap hosted on an ArcGIS Enterprise Portal.

The typical method for doing so within the ArcGIS Server JavaScript API is:

EsriConfig.portalUrl = "https://url-to-portal";
const webMap: esri.WebMap = new EsriWebMap({
 portalItem: {
 id: "webmap-item-id"
 }
});

This is failing for me with a CORS error because the Portal security has been restricted to a particular domain:

enter image description here

Access to fetch at 'https://url-to-portal/web/sharing/rest/portals/self?f=json&culture=en-gb' from origin 'http://127.0.0.1:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How can I access this webmap from my PC during development?

I tried to add my localhost to the list of approved domains on the Portal security page using all combinations of localhost, http://localhost, http://localhost:4200, http://127.0.0.1 etc but they all return an error message from the Portal security page:

enter image description here

Alternatively, how can I try the "set the request's mode to 'no-cors'" suggestion within the ArcGIS Server JS API syntax?

Answer 1

The answer came from Steven Haslemore via Twitter, which was to use the --disable-web-security flag on Chrome:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

This avoids the CORS error during testing.