MapTiler: Cross-Origin Read Blocking (CORB) blocked cross-origin

[brsnik]

Getting the following error with MapTiler: Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api.maptiler.com/maps/0d252733-b45d-492f-9a54-e8cf728d98d5/?key=key with MIME type text/html.

function mapTiler(x, y, z, dpr) {
  return `https://api.maptiler.com/maps/0d252733-b45d-492f-9a54-e8cf728d98d5/?key=key#${z}/${x}/${y}${
    dpr >= 2 ? "@2x" : ""
  }.png`;
}

    <Map
          provider={mapTiler}

          defaultCenter={[50.879, 4.6997]}
          defaultZoom={18}
          attribution={false}
        />

How do I fix this?

[patchampoux]

Hey! Have you found a solution for this problem? I am having the same issue.

[klokan]

Hi!

1. Do you have your own key? Get a free key at https://cloud.maptiler.com/account/keys/
2. Does your key have access to the specified map? Pick a map yourself at https://cloud.maptiler.com/maps/ or just replace the string
3. By default, your key is not going to be locked to any domain ... so it will run this way

The owner of the key can protect it - limit the key usage for his own domain or app user-agent - so others don't consume his requests. See: https://documentation.maptiler.com/hc/en-us/articles/360020806037-How-to-protect-your-map-key - if he does set the protection you get CORS / CORB error - but if you have a look on that request in Google Network console - you will see the error message properly on that request - very probably it means you are not allowed to use this key from your domain on the map of somebody else.

BTW where is this map with id 0d252733-b45d-492f-9a54-e8cf728d98d5 visible?
If it is a code example - you better replace it with streets map-id ...

[parvizmalik]

I have done exactly the same procedure like KLOKAN user mentioned, but i still get this error.