WMS API javascript 4.15

378
1
Jump to solution
05-12-2020 12:00 AM
deleted-user-VQ40NmU7Vt6N
New Contributor II

I have a problem with public NASA layer wms, this is my simple code:

    <script>
        require(["esri/Map","esri/views/MapView","esri/layers/WMSLayer"], 
      function(MapMapView,WMSLayer) {
                var map = new Map({
                    basemap: "streets-navigation-vector"
                });
      
                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    center: [-118.8050034.02700], // longitude, latitude
                    zoom: 13
                });
                var layer = new WMSLayer({
                      url: "https://firms.modaps.eosdis.nasa.gov/wms",
                      sublayers: [{
                          name: "fires_viirs_24",
                  }]
              });
              
              map.add(layer);

            });
        </script>
And this is the console error: Access to fetch at 'https://firms.modaps.eosdis.nasa.gov/wms?SERVICE=WMS&REQUEST=GetCapabilities' from origin 'null' 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 DO NOT UNDERSTAND THIS ERROR BECAUSE I CAN USE THIS WMS IN OPENLAYERS EASILY WITHOUT ERROR.
IS THERE ANY SIMPLE CODE TO FIX THIS?
Thanks!!
0 Kudos
1 Solution

Accepted Solutions
GeofyAdmin
New Contributor III

This is your web browser basically acting as designed: you can load your app from domain1 and reach out to domain2. It’s a security thing..

To temporarily disable such behavior, just to see that your code works, you can use chrome by running it from the command line like this:

chrome.exe —disable-web-security —user-data-dir=c:\temp

then open your app. 

For a more permanent solution you need to configure your web server where your app is deployed to allow cors. 

There is also the proxy option, where you place a proxy app on the server to route all calls; that way your client only talks to your webserver so you avoid cors altogether. 

View solution in original post

0 Kudos
1 Reply
GeofyAdmin
New Contributor III

This is your web browser basically acting as designed: you can load your app from domain1 and reach out to domain2. It’s a security thing..

To temporarily disable such behavior, just to see that your code works, you can use chrome by running it from the command line like this:

chrome.exe —disable-web-security —user-data-dir=c:\temp

then open your app. 

For a more permanent solution you need to configure your web server where your app is deployed to allow cors. 

There is also the proxy option, where you place a proxy app on the server to route all calls; that way your client only talks to your webserver so you avoid cors altogether. 

0 Kudos