CORS

Configuração para permitir requisições de diferentes origens em aplicações web.

Ao desenvolver aplicações JavaScript que fazem requisições diretamente do navegador para APIs externas, você precisará configurar o suporte a CORS (Cross-Origin Resource Sharing).

Isso é necessário porque os navegadores modernos implementam a política de mesma origem (same-origin policy), um mecanismo de segurança que bloqueia requisições entre diferentes domínios. Sem a configuração adequada de CORS, suas requisições serão bloqueadas e você encontrará erros no console do navegador.

Sintomas

Se você tentar fazer uma requisição diretamente do navegador sem configurar CORS, encontrará um erro como este no console:

Access to fetch at 'https://api.hgbrasil.com/finance?key=suachave' from origin 'http://seusite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Esse erro acontece porque o navegador está protegendo seus usuários, bloqueando requisições não autorizadas entre diferentes domínios.

Solução

Para permitir que suas requisições funcionem no navegador, adicione o parâmetro format=json-cors à sua URL:

GET
https://api.hgbrasil.com/finance?format=json-cors&key=suachave

Esse parâmetro instrui nossa API a incluir os cabeçalhos HTTP necessários na resposta, informando ao navegador que a requisição é segura e autorizada.

O formato json-cors é projetado especificamente para aplicações JavaScript que rodam no navegador. Ele adiciona os cabeçalhos Access-Control-Allow-Origin necessários para que o navegador permita a requisição.

Desenvolvimento Local

Se você está testando localmente, não precisa se preocupar! Os seguintes endereços já são permitidos automaticamente: localhost e 127.0.0.1.

Isso significa que você pode começar a desenvolver imediatamente sem configuração adicional.

Ambiente de Produção

Quando sua aplicação estiver pronta para produção, você precisará autorizar explicitamente o domínio onde ela estará hospedada. Por exemplo, se seu site for example.com, você deve adicionar esse domínio à lista de domínios permitidos.

Como configurar:

  1. Acesse o painel de controle da sua conta;
  2. Vá para a seção de gerenciamento de chaves de API;
  3. Ao criar ou editar uma chave, procure pela opção de "chave para uso exposto";
  4. Adicione os domínios que devem ter permissão para usar essa chave.
Gerenciar Chaves de API
Lembre-se de adicionar apenas os domínios necessários. Isso ajuda a manter sua chave segura e evita uso não autorizado.