CORS error when trying to access NASA layer

SethLutske

Hi all,

I am trying to pull a layer hosted by the nasa mapserver into my arcgis js api app.  The layer is here:

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

I define the layer like this:

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

 And add it to the map.  This is giving me a classic CORS error:

Access to fetch at 'https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer/547?f=json' from origin 'http://localhost:5501' 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.

I've done a lot of reading about CORS issues, and configuring a proxy, but I'm struggling to pull this layer in. I am not having issues with my other layers, most of which are coming directly from arcgis's own servers.  When I check the response headers for this request, there are no "Access-Control-Allow-<X>" headers.  Does this mean that this is an older server that is not configured for CORS?  

I registered my application and tried to establish a proxy for it , and then use esriConfig to configure my app to use it.  When I do that, the page make a request without the proxy, which throws the CORS error.  But then it makes the request again with the proxied URL:

https://utility.arcgis.com/usrsvcs/appservices/LmNXFvAttVIu5FBo/rest/services/World/Utilities/GPServer/GetToolInfo/execute?https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer/547?f=json

But I'm getting a 403:forbidden error on that request.  Though I may not have configured my proxy correctly in my app.  Configuring a proxy requires that you select a service, like "Geocoding," "Routing Utilities," etc.  I tried "Routing Utilites," and "Service Area," but I'm sort of stumbling in the dark.

 

I'm not sure if I'm going about this all wrong.  How can I get these NASA layers in my app?  I was under the assumption that NASA's layers are available for public consumption.  Is that incorrect?

 

Thanks for reading

SethLutske

I did get it working, but not with any of the proxies provided by ESRI.  I wrote my own quick nodejs server and used an instance of cors-anywhere to attach the proper cors headers.  Here's the code for that:

const express = require('express');
const cors = require('cors');
const corsAnywhere = require('cors-anywhere');
const path = require('path');

const port = process.env.PORT || 3030;
process.env.PWD = process.cwd();

var app = express();

let proxy = corsAnywhere.createServer({
	originWhitelist: [], // Allow all origins
	requireHeaders: [], // Do not require any headers.
	removeHeaders: [], // Do not remove any headers.
});

app.use(cors());

app.get('/proxy/:proxyUrl*', (req, res) => {
	req.url = req.url.replace('/proxy/https:/', '/https://');
	proxy.emit('request', req, res);
});

app.use(express.static(path.join(process.env.PWD, 'dist')));

app.listen(port, () => {
	console.log(`App listening on port ${port}`);
});

The proxy url replace line is a little weird, you can read more about why I had to do that here: https://stackoverflow.com/a/65217801/12010984

Then when I create my layer, I prefix the layer url with /proxy/, and it works.  As you can see, this same server which provides the proxy also serves the static front end files from the dist folder.  

For some reason NASA returns the image responses verrryy slowly, but it does work with no CORS errors.  Hopefully that helps you.