[Solved] Earth Engine NodeJS API: Failed to load resource and CORS policy issue

user154666 Asks: Earth Engine NodeJS API: Failed to load resource and CORS policy issue
I am developing a GEE nodeJS custom application. I have gone through the documentation and source(earthengine-api/demos/server-auth-nodejs at master · google/earthengine-api). I setup the service account and added the private key JSON file in the application. When I run the application it is showing:

i. Failed to load resource: the server responded with a status of 404 ()
and
ii. Access to XMLHttpRequest at ‘https://earthengine.googleapis.com/map/projects/earthengine-……… from origin ‘http://localhost:3000‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Server.JS

Code:
const ee = require('@google/earthengine');
const express = require('express');
const handlebars  = require('express-handlebars');

const app = express()
  .engine('.hbs', handlebars({extname: '.hbs', cache: false}))
  .set('view engine', '.hbs')
  .use('/static', express.static('static'))
  .get('/', (request, response) => {
    var image = ee.Image('srtm90_v4');
    image.getMap({min: 0, max: 1000}, ({mapid, token}) => {
      console.log(mapid);
      console.log(token);
      response.render('index', {layout: false, mapid, token});
    });

  });

// Private key, in `.json` format, for an Earth Engine service account.
const PRIVATE_KEY = require('./privatekey.json');
const PORT = process.env.PORT || 3000;

ee.data.authenticateViaPrivateKey(PRIVATE_KEY, () => {
  ee.initialize(null, null, () => {
    app.listen(PORT);
    console.log(`Listening on port ${PORT}`);
  });
});

Script.JS

Code:
const EE_MAP_PATH = 'https://earthengine.googleapis.com/map';

/**
 * Initialize the Google Map and add our custom layer overlay.
 * @param {string} mapid
 * @param {string} token
 */
const initialize = (mapid, token) => {
  // Create an ImageOverlay using the MapID and token we got from Node.js.
  const tileSource = new ee.layers.EarthEngineTileSource({
    mapid,
    token,
    formatTileUrl: (x, y, z) =>
        `${EE_MAP_PATH}/${mapid}/${z}/${x}/${y}?token=${token}`
  });
  const layer = new ee.layers.ImageOverlay(tileSource);

  const myLatLng = new google.maps.LatLng(-34.397, 150.644);
  const mapOptions = {
    center: myLatLng,
    zoom: 8,
    maxZoom: 10,
    streetViewControl: false,
  };

  // Create the base Google Map.
  const map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Add the EE layer to the map.
  map.overlayMapTypes.push(layer);
};

index.hbs

Code:
<!DOCTYPE html>
<html>
  <head>
    <title>SRTM</title>
  </head>
  <body>
    <!-- The element into which we render the Google Map. -->
    <div id="map" style="width: 640px; height: 480px;"></div>

    <script src="/static/ee_api_js.js"></script>

    <script src="/static/script.js"></script>

    <script>

      var initMap = function() {
        initialize('{{ mapid }}', '{{ token }}');
      };
    </script>

    <!-- Load the Google Maps API, and run the initMap() callback when finished. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=RemovedForTheStackExchangePost&callback=initMap"
            async defer></script>
  </body>
</html>


enter image description here

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.