How to fix the problem: "Unable to load resource: net::ERR_CONNECTION_REFUSED http://localhost:8989/route?...."

Question

There is a problem with my program. This is a program about geographic information systems, using the LeatlefJs library, and I also used the letlef router function. The problem is that the system isn't able to display the route it should be able to, I don't quite understand. Here is the script.

function getDirectRoute(index, callbackFunction){
            var dari = marker_awal.getLatLng().lat + "," + marker_awal.getLatLng().lng;
            var tujuan = markerCabang[index].getLatLng().lat + "," + markerCabang[index].getLatLng().lng;
            $.ajax({
                  type: "GET",
                  url: "http://localhost:8989/route?point=" + dari + "&point=" + tujuan + "&points_encoded=false&instructions=false&vehicle=motorcycle&ch.disable=true&weighting=shortest&algorithm=alternative_route",
                  dataType: 'json',
                  contentType: "application/json",
                  success: function (data) {
                    successReveived++;
                    var coordinates = data.paths[0].points.coordinates;
                    tempDistance = 0;      
                    for(var j=0; j<coordinates.length; j++){
                        if(j==0){
                            tempDistance += euclidean(marker_awal.getLatLng().lat, marker_awal.getLatLng().lng, coordinates[j][1], coordinates[j][0]);
                        } else {
                            tempDistance += euclidean(coordinates[j-1][1], coordinates[j-1][0], coordinates[j][1], coordinates[j][0]);
                        }
                    }
                    distanceGH[index] = data.paths[0].distance;
                    distanceManual[index] = tempDistance.toFixed(4);
                    
                    if(successReveived == markerCabang.length && typeof(callbackFunction == 'function')){
                        callbackFunction();
                    }
                  }
            });
        }

The error is like this

Unable to load resource: net::ERR_CONNECTION_REFUSED http://localhost:8989/route?point=3.611967691620835,98.67254734039308&point=3.611126,98.67548&points_encoded=false&instructions=false&vehicle=motorcycle&ch.disable=true &weighted=shortest&algorithm=alternative_route

Answer 1

(I can't comment yet, so trying to help you answer)

1. Make sure you have a valid backend to react to the JS library (see https://www.liedman.net/leaflet-routing-machine/tutorials/alternative-routers/ for a valid backend end)
2. Try entering the URL directly into the browser (without using Leaflet or anything else): http://localhost:8989/route -> You should see the JSON output, even if it shows a malformed or invalid request. If you are already experiencing network issues, you need to check the network layer (e.g. firewall, backend port bindings, etc.), if this is not the case, continue.
3. Open the Network tab in Browser Developer Tools (F12) and filter all connections to the backend. Now try using map/leafletJS and check the other information in that tab. You may see an error message indicating that your browser is blocking the request due to issues related to Cross-Origin Requests (CORS).