如何在不引发 CORB 错误的情况下将 TileServer-GL 地图图块提供给 Openlayers

Question

我需要离线运行 OpenLayers 实例。我正在尝试加载从here 下载的地图图像图块。我正在运行 documentation 中指定的 TilerServer-GL docker 映像。我有一个简单的index.html 文件来显示OpenLayers QuickStart documentation 中指定的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,
}),

使用 QuickStart 文档中指定的 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 提供的磁贴数据？我不想禁用浏览器安全功能作为解决方法。

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

操作系统：ubuntu 20.04 LTS

节点版本：v16.5.0

OpenLayers 版本：6.6.1

编辑：

重现步骤：

1. 将简单的入门 html 从 OpenLayers QuickStart 复制到名为 index.html 的文件中。
2. 用我上面贴的代码替换 TileLayer 源代码
3. 下载一些mbtile，例如these
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 获取请求中工作。