Json 文件不显示在谷歌浏览器中

Question

我正在开发一个通过 jQuery 和 Leaflet 显示 Json 文件的页面。

Flickr 端工作正常，但是当我尝试 $.getJSON o 时，我在 Chrome 的控制台中看到一个错误：

XMLHttpRequest 无法加载文件：///C:/AppServ/www/PFEleaflet/test%20geojson/lot.json。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。

但是当我尝试在 FireFox 中打开 .html 页面时，会显示 Json 文件，它工作正常。

这是我正在使用的代码：

var geoLayer = L.geoJson().addTo(map);
var geoList = L.control.geoJsonList(geoLayer);

geoList.on('item-active', function(e) {
    $('#selection').text(JSON.stringify(e.layer.feature.properties));
})
.addTo(map);

$('#geofile').on('change', function(e) {

    $.getJSON(this.value, function(json) {

        map.removeLayer(geoLayer);

        geoLayer = L.geoJson(json).addTo(map);
        map.fitBounds( geoLayer.getBounds() );

        geoList.reload( geoLayer );
    });
}).trigger('change');

请帮忙。

Answer 1

建议在本地服务器上打开此页面，而不是使用文件协议，这会导致这里和其他地方出现问题。 Nodejs serve 很棒，还是 Ruby 内置的 http 服务器。

这是一个很棒的清单。 https://gist.github.com/willurd/5720255

Answer 2

默认情况下，Chrome 不允许任何页面访问 file:/// 方案，即使该页面也在该方案中（在您的本地计算机上）。您可以通过向 Google Chrome 快捷方式添加参数来覆盖此默认设置，如下所示：

转到您的桌面并复制 Google Chrome 快捷方式。右键单击快捷方式，然后单击Properties。在属性窗口中，将以下内容添加到目标属性（引号之外）：

--allow-file-access-from-files

这应该会产生一个看起来像这样的目标属性：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

现在关闭所有打开的 Google Chrome 窗口并确保没有 chrome.exe 进程正在运行。将您的文件拖到刚刚创建的新快捷方式上，您的页面应该会启动并正常工作。

注意：我不建议更改原始快捷方式或将其设为默认快捷方式，因为启用此功能后，任何页面都可以访问file:/// 方案，而不仅仅是您机器上的页面。