How to serve TileServer-GL map tiles to Openlayers without throwing CORB error

Question

I need to run an OpenLayers instance offline. I am trying to load map image tiles which I have downloaded from here. I am running TilerServer-GL docker image as specified in the documentation. I have a simple index.html file to display an OpenLayers map as specified in the OpenLayers QuickStart documentation. The only change I have made to the .html they provide is to change the Tile Layer source as follows:

source: new ol.source.XYZ({
  url: 'http://localhost:8080/data/openmaptiles_satellite_lowres/#{z}/{x}/{y}',
  attributions: ['MapTiler: https://www.maptiler.com/copyright/', 'OpenStreetMap: https://www.openstreetmap.org/copyright'],
  maxZoom: 5,
}),

This map loads as expected when using the OSM() source as specified in the QuickStart docs. It also loads other online sources I have found. But when I give it the reference to the local TileServer-GL instance as I have indicated in my code above, I get the following CORB error:

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

How can I securely access the tile data being served by TileServer-GL? I do not want to disable browser security features as a work around.

Note: I know the TileServer is getting the requests from the browser because the TileServer console logs the requests in real time. For example: GET /data/openmaptiles_satellite_lowres/ 200 899 - 0.704 ms

OS: ubuntu 20.04 LTS

Node version: v16.5.0

OpenLayers Version: 6.6.1

EDIT:

Steps to reproduce:

1. Copy the simple starter html from OpenLayers QuickStart into a file named index.html.
2. Replace the TileLayer source with the code I posted above
3. Download some mbtiles, for example, these
4. Move the .mbtiles file to the same directory as index.html
5. Install docker (if needed)
6. run docker pull maptiler/tileserver-gl
7. In the same directory as index.html run docker run --rm -it -v $(pwd):/data -p 8080:80 maptiler/tileserver-gl (Note: If you are on Windows you need to use ${pwd}, not $(pwd). Docker may throw a warning if one of your folder names has a space character in it.)
8. Load index.html in a browser (IE doesn't count).

Tada! You (almost) have a working offline maps app!

Answer 1

Turns out that the reason the CORB error was being thrown was because the server was responding with a 'text/html' MIME type and the browser was expecting an image. Since it didn't match, the CORB error was thrown.

The server was responding with the wrong type because the URL was wrong. I had:

http://localhost:8080/data/openmaptiles_satellite_lowres/#{z}/{x}/{y}

While it needed to be

http://localhost:8080/data/openmaptiles_satellite_lowres/{z}/{x}/{y}.jpg

The first URL worked fine if I put it directly into the browser, but only the second URL worked inside the JavaScript fetch request.