Local GeoJSON not showing on Leaflet map

Question

I'm trying to load a local GeoJSON to a leaflet map. I'm new to leaflet so I was just following this example: https://www.igismap.com/add-load-geojson-file-point-polyline-polygon-map-leaflet-js/

So in the page html, I added this:

<div id="map" style="width: 600px; height: 400px; position: center;"></div>
<script src="maps/overview.js"></script>

And in the overview.js file, I added this:

// loading GeoJSON file - Here my html and usa_adm.geojson file resides in same folder
$.getJSON("/maps/area.geojson",function(data){
// L.geoJson function is used to parse geojson file and load on to map
L.geoJSON(data,{style: myStyle}).addTo(map);
});

When I used the Brackets to see the live preview of the page, the features in the geoJSON file were shown. But when I accessed it from the web, the polygon was not shown. What could be the issue here?

Update: Error found in browser console:

Answer 1

Thanks all for the suggestions. I found the 404 error is due to the .geojson extension is not configured in IIS. I fixed the issue by adding '.geojson' in MIME types of IIS manager (https://bobcares.com/blog/how-to-add-mime-type-in-iis/). I hope it will not cause any unexpected issues.