react-leaflet调用本地maptiler瓦片服务出现CORB警告地图空白

问题根因 #

你在React-Leaflet中配置的瓦片URL多了多余的#符号，导致Leaflet无法正确识别{z}/{x}/{y}坐标占位符，不会发起实际的瓦片加载请求，最终地图显示空白。

原生Leaflet代码中URL为http://172.17.0.6/styles/basic-preview/{z}/{x}/{y}.png，而React-Leaflet代码中你错误写成了http://172.17.0.6/styles/basic-preview/#{z}/{x}/{y}.png，多出来的#破坏了占位符格式。

CORB告警的本质 #

你看到的CORB告警是表象：因为占位符解析失败，Leaflet实际请求的是http://localhost:8080/styles/basic-preview/这个不带坐标参数的地址，该地址返回的是MapTiler的预览HTML页面而非png图片，因此触发了跨域资源读取拦截。后续你添加crossOrigin属性后告警消失，但因为占位符错误的问题没有解决，依然不会有瓦片请求发送，所以地图还是空白。

解决方案 #

修正TileLayer组件的URL配置，删除占位符前多余的#即可：

<MapContainer id="mapid" center={[53.475, -113.4131]} zoom={10.22} scrollWheelZoom={true}>
  <TileLayer
    maxZoom={18}
    attribution={'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'}
    id={'mapbox/streets-v11'}
    tileSize={512}
    zoomOffset={-1}
    crossOrigin="anonymous"
    // 仅需删除#{z}中的#，保留原生格式即可
    url={'http://172.17.0.6/styles/basic-preview/{z}/{x}/{y}.png'}
  />
</MapContainer>

你之前配置的Nginx跨域头已经满足要求，不需要额外添加其他响应头。

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