CORS error when trying to access NASA layer

298
15
a week ago
Highlighted
New Contributor II

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?  

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/GPServ...

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

Tags (2)
Reply
0 Kudos
15 Replies
Highlighted
MVP Frequent Contributor
Reply
0 Kudos
Highlighted
New Contributor II

So I am not the administrator for this server / organization.  I'm not even a member.  I'm not sure if what I'm trying to do is even possible, but the solution I need would have to be entirely from the layer-consumer end, if such a solution exists.

Reply
0 Kudos
Highlighted
Esri Regular Contributor

do you belong to the organization that owns that layer (NASA)?

Reply
0 Kudos
Highlighted
MVP Frequent Contributor
Reply
0 Kudos
Highlighted
New Contributor II

So this talks about including a cross-domain policy file in the root directory of the web server.  I am developing an app which runs locally with a webpack-dev-server, and which will eventually be hosted on github pages.  So I'm not really sure where a cross-domain poly file would come into play.  After seeing your linked article, I did try to add cors headers to my webpack dev server , but it had no effect.

Reply
0 Kudos
Highlighted
New Contributor II

I am not a member of the org that owns the layer.  So I guess my next question would be: do I need to be?  Can I not consume these layers from an external / public application?  The terms of t service of the layer say that the layer is available for "...freely available to federal, state, public, non-profit and commercial users...".  Am I interpereting that incorrectly?

Reply
0 Kudos
Highlighted
Esri Regular Contributor

Does this work on another dataset? I'm guessing the owners of that data have chosen to restrict it to only run on certain domains. Easy to validate if you switch out for a layer you know is public with no such restrictions. 

Reply
0 Kudos
Highlighted
New Contributor II

I'm not having issues with data / layers from other servers in the same application.  It seems to just be NASA's maps.disasters.nasa.gov server that doesn't send responses with the "Access-Control-Allow-Origin" header, hence the CORS error.  I think RobertScheitlin__GISP is on the right track with configuring a proxy, so I'll keep trying to get that working.  Though if you've got ideas, I'm open to suggestions.

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

One big issue I see is that you are trying to access a a MapImageLayer using a map service sublayer url.

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

 It should look like this:

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

Notice no sublayer 547 in the url. 

Reply
0 Kudos