Local CORS proxy: nginx forwards /carto/ to a.basemaps.cartocdn.com

Direct fetching from a.basemaps.cartocdn.com was returning
stripped/missing CORS headers in the user's browser, blocking
the img.src load. Even with cache-busters the failure persisted.

Solution: local nginx proxy at /carto/ that forwards to the
upstream and always adds Access-Control-Allow-Origin: *.

Key detail: the 'resolver' directive is required inside the
proxy_pass location block so nginx can resolve the upstream
hostname. Without it, the location block silently fails (the
'/' location falls through to try_files ... =404, and the
~*\.(png|jpg)$ regex also matches and silently fails for GETs).

Also added 'location ^~ /carto/' to give prefix matching strict
priority over the .png regex match that was stealing the request.

JS now uses /carto/voyager/ (relative URL through the same
origin) so CORS preflight is not even needed.
This commit is contained in:
Richard Zink committed 2026-10-08 08:57:33 +02:00
1 parent 83fd829cd5
commit f55d96f462
2 files changed
+32 -8

No files matched your search

+3 -6
View File
@@ -284,7 +284,7 @@ function init(canvas) {
// mosaic centre always corresponds to UV (0.5, 0.5).
// Tile source: Carto basemaps Voyager style (with place names).
// Free, CORS-enabled, OSM-derived. URL format {z}/{x}/{y}.png.
var GROUND_TILE_URL = 'https://a.basemaps.cartocdn.com/voyager/';
var GROUND_TILE_URL = '/carto/voyager/';
var GROUND_TILE_Z = 11;
var GROUND_TILE_SIZE = 256;
// Fetch direction: which way the tile corridor is oriented.
@@ -318,11 +318,8 @@ function fetchTileImage(tileX, tileY) {
img.crossOrigin = 'anonymous';
img.onload = function() { resolve(img); };
img.onerror = function() { reject(new Error('tile fetch failed')); };
// Carto/OSM-style format: {z}/{x}/{y}.png with a per-tile cache
// buster to avoid any browser-cached 404s or CORS rejections
// from previous failed loads.
img.src = GROUND_TILE_URL + GROUND_TILE_Z + '/' + tileX + '/' + tileY
+ '?v=' + Date.now() + '_' + Math.floor(Math.random() * 1e6);
// Carto/OSM-style format: {z}/{x}/{y}.png via local proxy
img.src = GROUND_TILE_URL + GROUND_TILE_Z + '/' + tileX + '/' + tileY;
});
}