reactjs - 尝试运行使用 react-leaflet 显示的本地 tileserver 地图时出现跨域读取阻塞

Question

我无法让react-leaflet显示来自本地maptiler服务器的地图。但是，我可以获得以下显示 maptiler 地图的简单传单代码：

var mymap = L.map('mapid').setView([47.3769, 8.5417], 5);
L.tileLayer('http://172.17.0.6/styles/basic-preview/{z}/{x}/{y}.png', { 
        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
    }).addTo(mymap);

对于 react-leaflet 等效项，我尝试了以下所有 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}
                // url='http://172.17.0.5/styles/basic-preview/#{z}/{x}/{y}.png' // nginx proxy
                // url={'http://localhost:8080/styles/basic-preview/#{z}/{x}/{y}.png'} // local
                url={'http://172.17.0.6/styles/basic-preview/#{z}/{x}/{y}.png'} // directly
              />
            </MapContainer>

但是，我可以在没有 React 或传单脚本的情况下直接访问这些 URL 中的任何一个，它们都可以按预期工作。

在我使用 nginx 的情况下，我只是代理

    location ~* ^/styles/basic-preview/(.*)$ {
      add_header Access-Control-Allow-Origin "*";
      proxy_pass http://172.17.0.6/styles/basic-preview/$1;
    }

所以问题似乎出在 react-leaflet 上。在开发控制台中，所有 URL 都会给我一个 CORB 警告：

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

很长一段时间以来，我认为这是一个 CORS 问题，因此 nginx 带有标头，并且感到困惑，因为tileserver响应Access-Control-Allow-Origin: *中的标头确实有。

我曾尝试使用 nginx 添加一个Cross-Origin-Resource-Policy: cross-origin但没有成功。我认为它需要添加到响应标头中，我不确定如何使用 maptiler/tileServer-gl 的容器化版本来完成。

我也想知道这是否是红鲱鱼，因为文档确实说：

在大多数情况下，被阻止的响应不应影响网页的行为，并且可以安全地忽略 CORB 错误消息。~来源

我还可以添加crossOrigin={true}到 TileLayer 组件，在使用直接 URL 的情况下可以消除 CORB 警告。但是，问题仍然存在，地图是灰色的。在 dev-tools 网络选项卡中，没有从 tileserver 检索任何内容，但也没有任何错误。

那么 CORB 会阻止请求吗？为什么当我使用 react 作为前端而不是当我使用 vanilla JS 时这样做？

标签： reactjsleafletreact-leafletosm.pbftileserver-gl