Set up proxy to handle CORS for arcgis js api

The prologue:

I am trying to pull a layer into my arcgis-js-api application and I'm having a hard time. The layer is here:

https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer

And I am trying to add it in this way:

export const SC2Sept29 = new MapImageLayer({
    url:
        'https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer/547',
});

When running my app, I get the classic CORS error

Access to fetch at 'https://ift.tt/3msSIDV' from origin 'https://cdpn.io' 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.

This is coming from this codepen, but the same happens when developing locally with vscode live server, or webpack-dev-server. This does not happen with other layers, just from layers on the maps.disasters.nasa.gov server.

trying to set up a proxy

I got some advice from the thread CORS error when trying to access NASA layer that I need to set up a proxy for anything coming from this server. Their advice was to follow these instructions to set up a proxy, and to use one of arcgis's ready-made proxies. Personally, I am finding the instructions for the proxies repo to be lacking. All of my experience in setting up server-side apps is with nodejs, and I am not understanding the instructions for how to do this. The codepen I linked, for now, tries to use the CORS anywhere proxy but setting it in the esr/core/urlUtils:

urlUtils.addProxyRule({
  urlPrefix: 'maps.disasters.nasa.gov',
  proxyUrl: 'https://cors-anywhere.herokuapp.com',
});

But this gives an error saying that Unexpected token T in JSON at position 0. I can see in the network tab that the browser is indeed attempting to access the correct layer URL, correctly prefixed by the cors anywhere proxy URL. But the response itself is just the text of the cors anywhere proxy, hence the error:

As I mentioned my dev environments are vscode live server and a webpack dev server, depending on what part of the app im building. My target production environment is github pages - I didn't really expect this app to need a back end. If I need a server side to provide a proxy, I can host it on heroku or even AWS as a full stack app. When trying to use the pre-provided arcgis proxies, I get the same issue. For example, I cloned their proxies repo to my directory:

When configuring urlUtils to refer to one of these proxies, it does so, but just returns the text content of the proxy file and gives me the Unexpected token T in JSON at position 0 error. There's a lot of chat on the esri forums about IIS, but I'm a mac guy and have no experience with that. Esri offers proxies in .NET, java, or PHP, none of which I have experience in.

How can I get rid of these cors errors and properly pull layers from the nasa server into my app. If I need a proxy, how can I set one up that will work for both my dev and production environments? I have had a hard time finding tutorials at my level that apply to this scenario. Thanks for reading.

from Set up proxy to handle CORS for arcgis js api