topic Re: How do I access cross-domain resources in a local WAB app? in Web AppBuilder Custom Widgets Questions

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

VanessaKing — Thu, 13 Feb 2020 19:56:14 GMT

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.

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:31:46 GMT

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});‍‍‍‍‍‍‍‍‍

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

VanessaKing — Thu, 13 Feb 2020 20:38:28 GMT

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!