Tiles return 404 or are blocked by CORS

• The network panel is full of red 404s and the grid stays grey while the map framework itself loads fine.
• A 200 response whose body is an HTML login page renders as a broken image.
• Console reports a CORS error only after crossOrigin is set for canvas export.

1. Read the status code first and classify 404, 403 or CORS.
2. Open one tile URL directly in the browser to test whether the address itself is valid.
3. For 404, check {z}/{x}/{y} order (some services use {z}/{y}/{x}) and the y-axis flip ({-y} in Leaflet, a custom tileUrlFunction in OpenLayers).
4. For 403, check the key, the domain whitelist (localhost and file:// are often rejected), the daily quota and the HTTPS requirement.
5. For CORS, confirm whether crossOrigin is only needed for toDataURL export and remove it otherwise.

Correct the URL template and y-flip, whitelist the domain or renew the key, and enable crossOrigin only when the canvas must be exported. Add a tileerror handler so failures surface to users instead of leaving grey blocks.

'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
'{z}/{x}/{-y}.png'

L.tileLayer(url, {
  crossOrigin: 'anonymous'
}).addTo(map);

• Blaming the map library for a 404 caused by a swapped {x}/{y} order.
• Enabling crossOrigin on every tile layer 'for safety', which converts a working basemap into a CORS failure.