reactjs - react-leaflet を使用して表示されたローカル タイルサーバー マップを実行しようとすると、クロスオリジンの読み取りがブロックされる

Question

ローカルのmaptilerサーバーからマップを表示するためのreact-leafletを取得できません。ただし、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);

反応リーフレットに相当するものについて、次のすべての 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;
    }

したがって、問題は反応リーフレットにあるようです。開発コンソールでは、すべての 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 であり、タイルサーバーからの応答のヘッダーにAccess-Control-Allow-Origin: *とにかくあるため、混乱していました。

nginx を使用して a を追加しようとしましたCross-Origin-Resource-Policy: cross-originが、成功しませんでした。応答ヘッダーに追加する必要があると思いますが、コンテナ化されたバージョンの maptiler/tileServer-gl を使用してこれを達成する方法がわかりません。

ドキュメントには次のように書かれているので、これがRed Herringかどうかも疑問に思っています。

ほとんどの場合、ブロックされた応答が Web ページの動作に影響を与えることはなく、CORB エラー メッセージは無視しても問題ありません。〜ソース

また、TileLayer コンポーネントに追加crossOrigin={true}することもできます。これにより、直接 URL を使用する場合、CORB 警告が取り除かれます。ただし、問題は残り、マップは灰色です。dev-tools ネットワーク タブでは、タイルサーバーから何も取得されませんが、どこにもエラーはありません。

CORB はリクエストをブロックしていますか? フロントエンドとして反応を使用するときにそうするのに、バニラJSを使用するときはそうしないのはなぜですか?