Hospedando tiles no Netlify e resolvendo CORS

Adauto Costa
12 de jul.
2 min de leitura

Este é um guia extremamente rápido.

Por que usar Netlify?

CDN mundial gratuito na camada Starter.
Deploy contínuo: git push → build → online.
Possibilidade de definir cabeçalhos HTTP num simples arquivo _headers ou netlify.toml – é aí que resolvemos o CORS.

No Netlify segue a estrutura mínima do projeto

my-map/
├── tiles/               # pasta exportada pelo mbutil, gdal2tiles...
│   └── {z}/{x}/{y}.png  # ou {z}/{x}/{y}.pbf
├── index.html           # mapa MapLibre/Leaflet
└── _headers             # ← veremos já já

Gere as tiles em disco (criar mbtiles).
Exporte usando mbutil.
Suba tudo diretamente para o Netlify.

O que é CORS

Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) é um mecanismo que usa cabeçalhos adicionais HTTP para informar a um navegador que permita que um aplicativo Web seja executado em uma origem (domínio) com permissão para acessar recursos selecionados de um servidor em uma origem distinta. Um aplicativo Web executa uma requisição cross-origin HTTP ao solicitar um recurso que tenha uma origem diferente (domínio, protocolo e porta) da sua própria origem.

Um exemplo de requisição cross-origin: o código JavaScript frontend de um aplicativo web disponível em http://domain-a.com usa XMLHttpRequest para fazer uma requisição para http://api.domain-b.com/data.json.

Por motivos de segurança, navegadores restringem requisições cross-origin HTTP iniciadas por scripts. Por exemplo, XMLHttpRequest e Fetch API seguem a política de mesma origem (same-origin policy). Isso significa que um aplicativo web que faz uso dessas APIs só poderá fazer solicitações para recursos de mesma origem da qual o aplicativo foi carregado, a menos que a resposta da outra origem inclua os cabeçalhos CORS corretos.

O mecânismo CORS suporta requisições seguras do tipo cross-origin e transferências de dados entre navegadores e servidores web. Navegadores modernos usam o CORS em uma API contêiner, como XMLHttpRequest ou Fetch, para ajudar a reduzir os riscos de requisições cross-origin HTTP.

Ativando CORS no Netlify

Netlify já devolve Access-Control-Allow-Origin: * para arquivos estáticos comuns. Caso o seu navegador aponte erro de CORS, crie um _headers (ou use netlify.toml) e declare explicitamente:

# _headers
/*.png
  Access-Control-Allow-Origin: *
/*.jpg
  Access-Control-Allow-Origin: *
# Vetores comprimidos
/*.pbf
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET,OPTIONS
  Content-Type: application/x-protobuf
  Content-Encoding: gzip

Isso força o cabeçalho correto mesmo depois de o arquivo ser passado por gzip no build.

O padrão “*” é aceito por todos os navegadores; múltiplos domínios num único cabeçalho não funcionam – o browser ignora.