JSON 404 error when I deploy on server with ASP.NET MVC 5

Question

If I run the web application locally, it works fine, the markers and lines are displayed fine. If I deploy it and go to the server, http://localhost/map/markers and http://localhost/map/lines cannot be found. I have already added

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

in Web.config. What am I doing wrong? Here's the code:

MapController.cs

public class MapController : Controller
{
    private DbData dbData;
    private MapObjects mapObjects;

    public MapController()
    {
        dbData = new DbData();
        mapObjects = dbData.ReceiveDataFromDb();
    }

    public JsonResult Markers()
    {
        var points = mapObjects.Points;

        /*using (var context = new ecc_web_page.DAL.MapContext()) {
            IQueryable<Point> linqQuery = from p in context.PlaceMarker.OfType<Point>().Include("Coordinate") select p;
            points = linqQuery.ToList();
        }*/

        var output = new List<dynamic>();



        foreach (var point in points)
        {
            if (point.Coordinate != null)
                output.Add(new { name = point.Name, lng = point.Coordinate.Longitude, lat = point.Coordinate.Latitude, z = 0, url = point.ExternalReference });
        }

        foreach (var s in output) {

        }

        return Json(output, JsonRequestBehavior.AllowGet);
    }

    public JsonResult Lines()
    {
        var lines = mapObjects.Lines;


        /*using (var context = new ecc_web_page.DAL.MapContext())
        {
            IQueryable<LineString> linqQuery = from p in context.PlaceMarker.OfType<LineString>().Include("Coordinates") select p;
            lines = linqQuery.ToList();
        }*/

        var output = new List<dynamic>();

        foreach (var line in lines)
        {
            var coordinates = new List<dynamic>();
            if (line.Coordinates != null)
            {
                foreach (var coord in line.Coordinates)
                {
                    coordinates.Add(new { lng = coord.Longitude, lat = coord.Latitude });
                }
            }

            output.Add(new { id = line.ID, coords = coordinates });
        }

        return Json(output, JsonRequestBehavior.AllowGet);
    }
}

map.ts

var fetch: any;
var google: any;
var Promise: any;

var markersPromise = fetch(window.location.origin + "/map/markers").then(response => response.json());
var linesPromise = fetch(window.location.origin + "/map/lines").then(response => response.json());

function initMap() {

    const standardMarker = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
    const noticeMarker = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";

    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 0, lng: -180 },
        zoom: 1
    });

    Promise.all([markersPromise, linesPromise]).then(values => {

        var addedMarkers = [];
        var bounds = new google.maps.LatLngBounds();

        for (let marker of values[0]) {
            const addedMarker = new google.maps.Marker({
                position: { lat: marker.lat, lng: marker.lng },
                map: map,
                animation: google.maps.Animation.DROP,
                title: marker.name,
                icon: standardMarker,
                url: marker.url
            });
            addedMarkers.push(addedMarker);
            bounds.extend(addedMarker.getPosition());

            addedMarker.addListener('click', function () {

                /*document.getElementById("terminal-title").innerHTML = marker.name;

                document.getElementById("terminal-view-btn").onclick = function () {
                    var query = '/Home/TerminalView?terminalUrl=' + marker.url;
                    window.location.href = query;*/

                document.getElementById("terminal-iframe-wrap").style.display = 'inline';
                document.getElementById("all-terminals-view").style.display = 'none';
                (<HTMLIFrameElement>document.getElementById("terminal-iframe")).src = marker.url;
            });

        }

        for (let line of values[1]) {

            const coords = [];
            for (let linePoint of line.coords) {
                const latLng = { lat: linePoint.lat, lng: linePoint.lng };
                coords.push(latLng);
                bounds.extend(latLng);
            }

            const addedLine = new google.maps.Polyline({
                path: coords,
                geodesic: true,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2,
                map: map
            });
        }

        map.fitBounds(bounds);

        setInterval(() => {
            var randomMarker = addedMarkers[Math.floor((Math.random() * addedMarkers.length))];

            randomMarker.setAnimation(google.maps.Animation.BOUNCE);
            randomMarker.setIcon(noticeMarker);

            setTimeout(() => {
                randomMarker.setAnimation(null);
                randomMarker.setIcon(standardMarker);
            }, 1400);
        }, 5000);

    }, reason => {
        console.log(reason);
    });
};

Answer 1

I don't know why or how, but after deploying a bunch of times I got the 403.14 error (Forbidden). I changed the application pool defaults to v4.0 and everything worked after that. Here is how I did it.

Answer 2

just try with your hosted server link instead of window.location.origin