如何为OpenLayers提供TileServer-GL瓦片服务且不触发CORB错误

你遇到的问题由两个错误共同导致：

1. OpenLayers的XYZ源URL模板配置错误
2. 直接使用file协议打开本地HTML文件触发跨域拦截

1. 修正瓦片源配置 #

OpenLayers的XYZ图层占位符不需要加#前缀，同时需要补全瓦片资源的后缀（通常为png/jpg）。你可以先访问http://localhost:8080打开TileServer-GL的管理预览页，找到对应卫星图层的XYZ地址模板直接复用，修正后的配置参考：

source: new ol.source.XYZ({
  url: 'http://localhost:8080/data/openmaptiles_satellite_lowres/{z}/{x}/{y}.png',
  attributions: ['MapTiler', 'OpenStreetMap'],
  maxZoom: 5,
}),

2. 规避跨域问题 #

不要直接双击打开本地HTML文件（此时用的是file://协议，访问http://localhost:8080的资源属于跨域场景），你可以在index.html所在目录启动一个本地静态HTTP服务：

• 已安装Node环境的话，直接执行：
  npx serve .
• 也可以用Python自带的服务：
  Python3: python3 -m http.server 3000
  Python2: python -m SimpleHTTPServer 3000

启动后在浏览器访问http://localhost:3000打开页面即可，TileServer-GL默认已配置跨域头，无需额外修改服务端配置即可正常请求瓦片。

验证操作 #

修改完成后先确认TileServer-GL预览页可以正常加载瓦片，再访问本地静态服务的测试页，即可正常加载离线瓦片。

内容的提问来源于stack exchange，提问作者Manodiestra