topic Re: CORS error when trying to access NASA layer in ArcGIS JavaScript Maps SDK Questions

CORS error when trying to access NASA layer

SethLutske — Fri, 20 Nov 2020 19:39:30 GMT

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

Re: CORS error when trying to access NASA layer

BillFox — Fri, 20 Nov 2020 19:49:06 GMT

does this help?

https://enterprise.arcgis.com/en/server/latest/administer/windows/restricting-cross-domain-requests-to-arcgis-server.htm

Re: CORS error when trying to access NASA layer

Anonymous User — Fri, 20 Nov 2020 19:50:31 GMT

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

Re: CORS error when trying to access NASA layer

BillFox — Fri, 20 Nov 2020 19:56:40 GMT

nope,

maybe this too

https://www.esri.com/arcgis-blog/products/developers/administration/arcgis-ria-developers-tips-on-using-cross-domain-policy-files-part-1-intro/

Re: CORS error when trying to access NASA layer

RobertScheitlin__GISP — Fri, 20 Nov 2020 20:11:32 GMT

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.

Re: CORS error when trying to access NASA layer

SethLutske — Fri, 20 Nov 2020 21:10:36 GMT

Yes I am aware of that. I was playing around with the /547 at the end and happened to copy that code into this question. I am actually using the sublayers property in my code to property target the right sublayers, I just wrote that url into this post without double checking it. Regardless of the /id, I'm getting the CORS errors. Thanks for pointing this out though.

Re: CORS error when trying to access NASA layer

SethLutske — Fri, 20 Nov 2020 21:14:11 GMT

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?

Re: CORS error when trying to access NASA layer

SethLutske — Fri, 20 Nov 2020 21:18:04 GMT

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.

Re: CORS error when trying to access NASA layer

RobertScheitlin__GISP — Fri, 20 Nov 2020 21:54:46 GMT

OK, so it is an issue which how you are proxing then. Here is my code that works fine:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>MapImageLayer - set renderers on sublayers - 4.17</title> <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css"> <script src="https://js.arcgis.com/4.17/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/core/urlUtils", "dojo/domReady!" ], function( Map, MapView, MapImageLayer, urlUtils ) { urlUtils.addProxyRule({ urlPrefix: "maps.disasters.nasa.gov", proxyUrl: "proxy/proxy.ashx" }); var layer = new MapImageLayer({ url: "https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer", sublayers: [ { id: 549 }] }); var map = new Map({ basemap: "dark-gray", layers: [layer] }); var view = new MapView({ container: "viewDiv", map: map, zoom: 6, center: [-83.114, 36.921] }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Re: CORS error when trying to access NASA layer

SethLutske — Fri, 20 Nov 2020 22:33:30 GMT

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.

Re: CORS error when trying to access NASA layer

SethLutske — Fri, 20 Nov 2020 23:36:57 GMT

Is the proxy/proxy.ashx coming from the esri dotnet proxy? I am not familair with .NET, php, or java. Is it as simple as copying the files of the git repo into a directory in my project and referenceing that file?

Re: CORS error when trying to access NASA layer

SethLutske — Sun, 22 Nov 2020 04:50:42 GMT

I am struggling to get this to work. I have tried the DotNet and PHP proxy, but as I am not experienced in either language, I'm not sure if I'm doing it right. My network tab shows that when attempting to retrieve the layer, it is indeed being routed through the proxy, but the response is simply the text of the proxy file itself, and I get an "Unexpected token < in JSON at position 0" error in my console.

Re: CORS error when trying to access NASA layer

RobertScheitlin__GISP — Mon, 23 Nov 2020 14:20:56 GMT

Seth,

Using either Proxy does not require any experience in that language. The Proxy is a already build and configurable web application. All you have to know is how to deploy a web application to your web server. If your web server is IIS then you should just stick with the .Net proxy. Look in the proxies readme.md file for how to set it up and test the proxy using the ping url. https://github.com/Esri/resource-proxy/blob/master/DotNet/README.md

The only file you alter is the proxy.config. In there I have this

In my JS Development environment I have a C:\JS_Workspace setup as a virtual directory in IIS that allows me to run any html page from that location using my development machine url or localhost inside the C:\JS_Workspace I have the proxy folder with the proxy.ashx, proxy.config, etc. Because I have my xyz.html inside the C:\JS_Workspace and the proxy folder is also under C:\JS_Workspace then the code I provided earlier just works (no CORs errors).

Re: CORS error when trying to access NASA layer

Anonymous User — Mon, 23 Nov 2020 14:51:06 GMT

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.

Re: CORS error when trying to access NASA layer

SethLutske — Mon, 23 Nov 2020 16:01:42 GMT

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.

Re: CORS error when trying to access NASA layer

SethLutske — Mon, 23 Nov 2020 19:44:45 GMT

Sorry to keep dragging this out. I feel like there is a lot of assumed knowledge here and I'm trying to find my way. I have experience setting up server-side applications with node.js, and my dev environment has always been on a mac. Until this, I had never heard of IIS.

I read through those readmes thorougly, but I can't seem to connect the dots to get things to work in my local dev environment, let alone anticipate how to set it up for my target production environment. (My intention was to simply publish my application to github pages as a static web page, but if I need to deploy a server-side app as well to use a proxy, I suppose I could deploy it on heroku or AWS). I followed your suggestion of changing the url in the proxy.config for both the php and .net proxies, but still no change. I am testing small snippets like the HTML you posted in VS Code with vscode live server. My local environment for my actual application uses webpack-dev-server. I'm at a loss for how to prepare a proxy for use with any of these environments. I feel I'd do well if there was a nodejs version of the proxy, as then I could at least understand the proxy code and how to run it.

At this point I've even tried putting in https://cors-anywhere.herokuapp.com/ a popuplar CORS workaround, as the proxyUrl in urlUtils. Even with this, the response is returning the content of the proxy, not the resource I want my proxy to communicate back to my page. You can see what I'm working with in my pratice git repo, here. I don't want to give up on this, but I feel there's a huge gap in documentation and I'm having a hard time agreeing with your statement that 'using either proxy does not require any experience in that language.'

I appreciate your time and your knowldge.

Re: CORS error when trying to access NASA layer

kattoor — Wed, 30 Dec 2020 11:13:04 GMT

Please let me know if you have got this working, I am also facing the same issue with the proxy (jsp/php/asp) services. But I could able to make the jsp proxy working, if I deploy both application code and proxy code in same server.

Re: CORS error when trying to access NASA layer

RobertScheitlin__GISP — Wed, 30 Dec 2020 15:17:18 GMT

It is absolutely standard to have4 the proxy and the app on the same server. Otherwise you will continue to have cors issues.

Re: CORS error when trying to access NASA layer

SethLutske — Wed, 30 Dec 2020 16:42:13 GMT

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:

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.