我在 Leaflet JS map 中获取外部 URL JSON 文件时遇到问题。当我尝试 JSON 本地文件时，它可以正常运行，但是当我从远程服务器更改为外部 URL 时，不会出现。
<body>
<div id="mapRain" style="height: 95vh;"></div>
<script>
var map = L.map('mapRain').setView([-1.4043771, 113.7221155], 7);
var imageBounds = [
[-5.247572, 110.593051],
[-9.563244, 114.948288]
];
var image = null;
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGV4dmlscyIsImEiOiJjanhvczU0MnQwYTR2M21vMTJ3MW5kYnRnIn0.9P2ISjrCdk7JLPt72aQQWA', {
maxZoom: 18,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> | © <a href="http://stamet.tjilikriwut.bmkg.go.id/">BMKG Palangka Raya</a>',
id: 'mapbox.streets'
}).addTo(map);
var planeIcon = L.icon({
iconUrl: 'img/plane.png',
iconSize: [60, 80],
iconAnchor: [30, 80],
});
$(function() {
$(document).ready(function() {
$.ajax({
url: "data/aviation.json",
dataType: "JSON",
type: "GET",
success: function(result) {
var report = result.report;
for (i = 0; i < report.length; i++) {
var popup = '<strong>' + report[i].icao_id + ' ' + report[i].station_name + '</strong><br>' + report[i].observed_time + ' ' + report[i].time_zone + '<br><img src="img/symbols/' + report[i].symbol + '.png"><br><strong>Cuaca : ' + report[i].weather + '</strong><br><br><strong>Angin</strong><br>Arah (dari) : ' + report[i].wind_direction + '<br>Kecepatan (km/h): ' + report[i].wind_speed + '<br><strong>Jarak penglihatan (km)</strong> : ' + report[i].visibility + '<br><strong>Suhu (°C)</strong> : ' + report[i].temp + '<br><strong>Titik Embun (°C)</strong> : ' + report[i].dew_point + '<br><strong>Tekanan (hPa)</strong> : ' + report[i].pressure;
L.marker([report[i].latitude, report[i].longitude], {
icon: planeIcon
}).addTo(map).bindPopup(popup);
}
}
});
});
});
</script>
</body>当我尝试更改外部 URL 时，数据不显示
$.ajax({
url: "https://juanda.jatim.bmkg.go.id/webkantor/data/aviation.json",
dataType: "JSON",最佳答案
欢迎来到 Stakoverflow Desnug。
由于 CORS 策略限制，使用远程地址不起作用。如果您查看控制台，您应该会看到类似 Access ... 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin” header 或 跨源读取阻止 (CORB) 阻止跨源响应...。您可以read more about CORS here .
不是您的脚本或浏览器的问题，而是浏览器必须采取的安全措施，以避免该网站/网络应用程序使用其他远程网站的未经授权的资源。
只有该网站的站长或服务器管理员才能启用跨源资源共享模式的资源访问。
如果我了解您的情况，您需要依赖该网站的更新数据。唯一的方法是设置一个服务器端脚本(例如使用 PHP)来下载远程 json。您可以选择将其配置为每次运行(cronjob)或将其编码为“中间服务”(例如，您的 jQuery 脚本调用 Aviation.php，它会下载并提供远程 json)。
关于javascript - 如何在Leaflet JS中获取外部URL JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56896174/