如何在不抛出CORB错误的情况下为Openlayers提供tilesserver语言 - gl地图块 &

Question

我需要离线运行OpenLayers实例。我试图加载地图图像瓷砖，我已经从这里下载。我正在运行在文档中指定的TilerServer-GL docker映像。我有一个简单的index.html文件来显示OpenLayers快速入门文档中指定的OpenLayers映射。我对他们提供的.html所做的唯一更改是更改Tile Layer源，如下所示:

source: new ol.source.XYZ({
url: 'http://localhost:8080/data/openmaptiles_satellite_lowres/#{z}/{x}/{y}',
attributions: ['MapTiler: https://www.maptiler.com/copyright/', 'OpenStreetMap: https://www.openstreetmap.org/copyright'],
maxZoom: 5,
}),

当使用快速入门文档中指定的OSM()源时，该映射按预期加载。它还加载了我找到的其他在线资源。但是，当我给它引用到本地TileServer-GL实例时，正如我在上面的代码中指出的那样，我得到以下CORB错误:

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:8080/data/openmaptiles_satellite_lowres/
with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details

我如何安全地访问由TileServer-GL服务的tile数据?我不想把禁用浏览器安全功能作为一种解决办法。

注意:我知道TileServer正在从浏览器获取请求，因为TileServer控制台实时记录请求。例如:GET /data/openmaptiles_satellite_lowres/ 200 899 - 0.704 ms

操作系统:ubuntu 20.04 LTS

节点版本:v16.5.0

OpenLayers版本:6.6.1 编辑:

复制步骤:

1. 将OpenLayers QuickStart中的简单starter html复制到名为index.html的文件中。
2. 用上面的代码替换TileLayer源代码
3. 下载一些mbtiles，例如，这些
4. 将.mbtiles文件移动到与index.html
相同的目录
5. 安装docker(如果需要)
6. 运行docker pull maptiler/tileserver-gl
7. 在与index.html相同的目录下运行docker run --rm -it -v $(pwd):/data -p 8080:80 maptiler/tileserver-gl(注意:如果你在Windows上，你需要使用${pwd}，而不是$(pwd)。如果文件夹名中有空格字符，Docker可能会抛出警告。)
8. 在浏览器中加载index.html (IE不算)。

大作。你(几乎)有一个离线的地图应用程序!

Answer 1

结果是抛出CORB错误的原因是因为服务器响应的是'text/html' MIME类型，而浏览器期望的是图像。由于不匹配，抛出CORB错误。

由于URL错误，服务器响应的类型错误。我:

http://localhost:8080/data/openmaptiles_satellite_lowres/#{z}/{x}/{y}

当它需要

时

http://localhost:8080/data/openmaptiles_satellite_lowres/{z}/{x}/{y}.jpg

如果我将第一个URL直接放入浏览器中，则它可以正常工作，但只有第二个URL在JavaScript获取请求中工作。