Here-Maps Routing API fails with invalid credentials, but other Here-API's continue to work with exact same credentials

So, I've copy pasted the example code from https://developer.here.com/documentation/maps/topics/routing.html into a new project after setting up a new Freemium project, and it worked flawlessly until recently when the routing API mysteriously began rejecting my API requests:

The credentials seem to be OK, given that every OTHER request using them worked just fine. Am I missing something, or is this an issue on their end?

(Site hosted on https://www.cs.drexel.edu/~nim28/CI102/Projects/Project-1/trucking-gps.php)

// Instantiate a map and platform object:
var platform = new H.service.Platform({
  'app_id': '4I898D4cYJAYrLryygIZ',
  'app_code': 'lfkO_XjyiIn0D-IdiPw-rg',
  useHTTPS: true
});
// Retrieve the target element for the map:
var targetElement = document.getElementById('map');

// Get the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();

// Instantiate the map:
var map = new H.Map(targetElement, defaultLayers.normal.map, {
  zoom: 10,
  center: {
    lat: 52.51,
    lng: 13.4
  }
});

// Create the parameters for the routing request:
var routingParameters = {
  // The routing mode:
  'mode': 'fastest;car', // The start point of the route:
  'waypoint0': 'geo!50.1120423728813,8.68340740740811', // The end point of the route:
  'waypoint1': 'geo!52.5309916298853,13.3846220493377', // To retrieve the shape of the route we choose the route
  // representation mode 'display'
  'representation': 'display'
};

// Define a callback function to process the routing response:
var onResult = function(result) {
  var route, routeShape, startPoint, endPoint, linestring;
  console.log(result);
  if (result.response.route) {
    // Pick the first route from the response:
    route = result.response.route[0];
    // Pick the route's shape:
    routeShape = route.shape;

    // Create a linestring to use as a point source for the route line
    linestring = new H.geo.LineString();

    // Push all the points in the shape into the linestring:
    routeShape.forEach(function(point) {
      var parts = point.split(',');
      linestring.pushLatLngAlt(parts[0], parts[1]);
    });

    // Retrieve the mapped positions of the requested waypoints:
    startPoint = route.waypoint[0].mappedPosition;
    endPoint = route.waypoint[1].mappedPosition;

    // Create a polyline to display the route:
    var routeLine = new H.map.Polyline(linestring, {
      style: {
        strokeColor: 'blue',
        lineWidth: 10
      }
    });

    // Create a marker for the start point:
    var startMarker = new H.map.Marker({
      lat: startPoint.latitude,
      lng: startPoint.longitude
    });

    // Create a marker for the end point:
    var endMarker = new H.map.Marker({
      lat: endPoint.latitude,
      lng: endPoint.longitude
    });

    // Add the route polyline and the two markers to the map:
    map.addObjects([routeLine, startMarker, endMarker]);

    // Set the map's viewport to make the whole route visible:
    map.setViewBounds(routeLine.getBounds());
  }
};

// Get an instance of the routing service:
var router = platform.getRoutingService();

// Call calculateRoute() with the routing parameters,
// the callback and an error callback function (called if a
// communication error occurs):
router.calculateRoute(routingParameters, onResult, function(error) {
  alert(error.message);
});

#map {
  height: 50vh;
  width: 75vh;
  margin: auto;
  display: block;
  vertical-align: middle;
  background: gray;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


/*# sourceMappingURL=trucking-gps.css.map */

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
</head>

<body style="background:gray;">
  <div id="map"></div>
</body>

</html>

EDIT

I do have those keys registered to the proper domain btw, so that's not the issue.

Solution

Freemium users need to have the correct HTTP Referer header set in their request. Checking Here logs,we could see that you are using:

referer=https://www.cs.drexel.edu/~nim28/CI102/Projects/Project-1/trucking-gps.php

However, the referrer in the Delivery Portal is set to “cs.drexel.edu” (no www)

This is why you get a 401 error. Because app_id / app_code are correct and active, the only reason for a http 401 is a wrong referrer. We have confirmed locally that setting the referrer to https://cs.drexel.edu/~nim28/CI102/Projects/Project-1/trucking-gps.php does work.

Hope this helps!