問題タブ [tileserver-gl]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - react-leaflet を使用して表示されたローカル タイルサーバー マップを実行しようとすると、クロスオリジンの読み取りがブロックされる
ローカルのmaptilerサーバーからマップを表示するためのreact-leafletを取得できません。ただし、maptiler マップを表示する次の簡単なリーフレット コードを取得できます。
反応リーフレットに相当するものについて、次のすべての URL を試しましたが、それらはすべて空のマップを表示するだけです
ただし、React やリーフレット スクリプトを使用せずにこれらの URL に直接アクセスすることはでき、それらはすべて意図したとおりに機能します。
nginx を使用する場合は、単純にプロキシします
したがって、問題は反応リーフレットにあるようです。開発コンソールでは、すべての URL で CORB 警告が表示されます。
長い間、これは 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を使用するときはそうしないのはなぜですか?