Compreendendo melhor como trabalhar com a Fetch API a partir do Navegador

A Fetch API é extremamente útil na obtenção de dados através de APIs, porém, é necessário compreender melhor como os protocolos HTTP funcionam.

Photo by C Perret on Unsplash

Enviando uma requisição com valores personalizados na header:

await fetch(`http://yourhost/your/end/point`, {
  headers: {
    'api-key': 'api-key-value'
  }
})

Podemos observar que no exemplo acima estou enviando uma requisição através do client (navegador) informando uma chave api-key, portanto, preciso habilitar o CORS no servidor:

...

const data = 'your-data'

return new Response(JSON.stringify(data), {
  status: 200,
  headers: {
    'Access-Control-Allow-Origin': '*', // Habilito o acesso a todos os hosts ou limito a um host específico
    'Access-Control-Allow-Methods': 'GET, OPTIONS',
    'Access-Control-Allow-Headers': 'api-key, ...others headers',
  },
})

Como estou enviando uma chave identificada como api-key na header, preciso habilitar no servidor o recebimento dessa informação, portanto preciso configurar a Access-Control-Allow-Headers para receber o valor de api-key.