How do I access cross-domain resources in a local WAB app?

[VanessaKing]

I have a WAB app that hasn't been deployed yet; it's just running locally. I'm writing a custom widget that needs to access data from an API. I'm getting an error of:

Access to fetch at '[API URL]' from origin 'https://[My Machine Name]:[Port]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any suggestions on how to fix this? Most of  the information I've found on this refers to deployed apps. I saw one suggestion to use an open-source proxy (e.g. https://cors-anywhere.herokuapp.com/) but I don't think that will work, because the API is only accessible on my organization's network.

[RobertScheitlin__GISP · Accepted solution]

Is your widget using a esriRequest class to access the API data? If so then you need to configure it to use the proxy. Here is an example of how I do it:

        var requestHandle = esriRequest({
          url: 'https://myapiurl',
          content: {
            ppin: ppin,
            f: 'json'
          },
          handleAs: "json",
          timeout: 10000
        },{useProxy: true, usePost: false, disableIdentityLookup: true});‍‍‍‍‍‍‍‍‍

[VanessaKing]

Thank you Robert for your quick and helpful response! I was using fetch, which doesn't seem to support proxy use, but I switched to using esriRequest and it worked!