Develop Reference

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://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer?f=json' 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.

Ok, I think now we can summarize.
In order for this to work you need to set a proxy. Like you mention ESRI provides some implementations on different techs.
I fork their repository in order to include an easy test setup using docker and docker-compose. resource-proxy fork
After clone it run,
sudo docker-compose -f docker-compose.php.yml up -d --build
Test proxy,
http://localhost:8082/proxy?ping
In their you will also find and example nasa-service.html that shows a correct configuration of the application and the proxy (all in PHP folder).
Just need to run http://localhost:8082/nasa-service.html.
The key thing here is that the application needs to be in the same origin that the proxy.

is it possible to solve Cross-Origin Resource Sharing issue from client side?

i am making a application by using REST API. the api provide me data but browser block for CORS policy. is it possible solve the issue from client side. or need to work at serve. i have try some nodejs package like cors-anywhere but still having issue

It is not possible to solve for good, because it is handled by server to control the origin request (The origin of the request(client) and the server must be in the same origin). But while you are developing you can use cors chrome extension, it will allow you to make the requests.
Chome extension.
Hope it helps.

HTTP vs HTTPS what is the difference and what is actually going on with SSL?

I had asked a question a while back about What is the difference between requiring an SSL cert and accepting an SSL cert?
For the most part that cleared up the differences between the two, however I am still a little unclear on the topic.
I have a few questions about this image:
Require SSL - What exactly does this mean from a client standpoint? Does it mean that in order for the webpage to appear the server needs to have an SSL certificate? How does this encryption work?
Client Certificates - I get that this all comes from the client, but is it something that I, as a webserver, would issue? What would be a particular situation where you would require a Client certificate?
Was also reading this article: Why SSL? The Purpose of using SSL Certificates
and while I do have Require SSL and Ignore Client certificates setup on specific pages, I don't see the below changes to the address bar:
Why do I not see that? What is required of me in order to get that working, because that leads me to believe there really isn't anything more secure with using HTTPS as opposed to HTTP
The reason that I am questioning this is because recently, when trying to dynamically load HTML into my website I was doing the loading using Javascript and HTTPS for the url, but I was getting domain errors saying that it was not coming from the same origin...
i.e. http://www.example.com & https://www.example.com - I don't get why I would get an error saying not the same origin? Not to mention I was also using the page with HTTPS (that is what was present in the address bar). Meanwhile while changing the link to HTTP seemed to fix that error.

Require SSL - What exactly does this mean from a client standpoint?
The documentation is a little unclear. It either means:
When a plain HTTP request is made to the server, it responds saying "The resource you want is at this HTTPS URL, go there to get it" or
It turns off plain HTTP support entirely
This is easy to test if you have an IIS server which supports SSL (I don't) and I would assume it is the first option.
Client Certificates - I get that this all comes from the client, but is it something that I, as a webserver, would issue? What would be a particular situation where you would require a Client certificate?
Generally, you would issue them in the capacity of "someone running a webserver, but possibly also other systems, which require a client certificate".
You use these in lieu of a username/password.
while I do have Require SSL and Ignore Client certificates setup on specific pages, I don't see the below changes to the address bar
It is hard to tell what the issue is when you don't show us what you see on your own site.
i.e. http://www.example.com & https://www.example.com - I don't get why I would get an error saying not the same origin?
The rules for origins are quite strict.
The hostname must be the same (it is)
The port must be the same (it isn't, you have 80 and 443, which are the defaults for HTTP and HTTPS)
The scheme must be the same (HTTP and HTTPS are not the same)
You should mitigate this by using SSL everywhere. Don't use plain HTTP for some things and HTTPS for others.
It's possible that the lack of notification from the browser that the connection is secure (as mentioned in the previous section) is due to you loading other resources over HTTP into the page, but without a test case it is hard to tell.

How to call a web api via ajax over SSL from a local html file?

I have a local html file in may desktop accessing a web api (JAX-RS) that responds with some JSON data. I enabled CORS and everything works fine, but only without SSL. How can I do to make it work with SSL? I use a self-signed certificate and can call this web api from a WPF application, but from a JavaScript application (standalone html file), when Chrome sends the OPTIONS pre-flight before the POST, the request seems not to even reach the server. I also tried to import the self-signed certificate in the browser, but nothing has changed.

The preflight request is not allowed to include an entity body or credentials. If you are using preflighted requests then you cannot use two way SSL.
The solution is to change the server to make the certificate optional. I've only done this using Apache HTTP server or Tomcat but I assume other servers are also capable of this.
In apache the setting should be changed to
SSLVerifyClient optional
and in Tomcat the SSL settings should be changed to
clientAuth="want"
Without this change only CORS simple requests will work.

Best way to test JSONP Request on localhost Dev Box

I don't have a testing server I can deploy on easily and i'd like to test some jsonp requests. Whats the best way to do this if i'm just deploying from eclipse on a dev box? Is it considered a cross site request if I deploy 2 instances of a server in eclipse, on separate ports? Is there some way to fake it and test locally within the project?

As far as two domains dont match up you should be fine to test it as a cross site jsonp call .
The term "origin" is defined using the domain name, application layer protocol, and (in most browsers) port number of the HTML document running the script. Two resources are considered to be of the same origin if and only if all these values are exactly the same.

JSONP doesn't require 2 hosts, it just supports it. So wether your JSONP response is coming from a remote server or the same server, it works pretty much the same.