Consumir APIs é uma das habilidades mais valiosas em Programação Front-End: praticamente toda interface moderna precisa buscar dados, enviar formulários, autenticar usuários e atualizar partes da tela sem recarregar a página. Para fazer isso com confiança, é essencial entender três pilares: como funciona o HTTP, como usar fetch (ou alternativas) e como lidar com CORS — o famoso bloqueio “funciona no Postman, mas não no navegador”.
Neste artigo, você vai aprender o necessário para consumir APIs no front-end de forma correta, previsível e segura, com exemplos práticos e um checklist para depurar erros comuns.
Para aprofundar com trilhas completas, vale visitar a subcategoria de cursos de https://cursa.app/curso-desenvolvimento-web-online-e-gratuito e a categoria maior de https://cursa.app/cursos-online-informatica-ti-gratuito.
1) O básico do HTTP que todo front-end precisa dominar
HTTP é o protocolo que define como cliente (o navegador) e servidor trocam mensagens. Quando você “consome uma API”, você está fazendo requisições HTTP e recebendo respostas HTTP.
Métodos mais usados
GET (buscar dados), POST (criar/enviar), PUT/PATCH (atualizar) e DELETE (remover). Além deles, o navegador pode disparar um OPTIONS automaticamente, especialmente em cenários com CORS (já chegaremos lá).
Status codes (códigos de resposta)
Aprender a ler status codes é meio caminho para depurar bugs:
- 200–299: sucesso (ex.: 200 OK, 201 Created, 204 No Content).
- 300–399: redirecionamentos (ex.: 301, 302).
- 400–499: erro do cliente (ex.: 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 429 Too Many Requests).
- 500–599: erro do servidor (ex.: 500 Internal Server Error).
Headers: o “contrato” invisível
Headers carregam metadados importantes: tipo do conteúdo, autorização, idioma, cache etc. Os mais comuns no dia a dia:
- Content-Type: define o formato (ex.: application/json).
- Accept: o que o cliente espera receber.
- Authorization: tokens (Bearer) e credenciais.
- Cache-Control: políticas de cache.
2) Consumindo APIs com fetch: exemplos práticos
O fetch é a API nativa do navegador para requisições. Ele retorna uma Promise, o que combina bem com async/await.
GET simples (buscar dados)
Exemplo de busca e conversão para JSON:<pre><code>async function carregarProdutos() { const response = await fetch(‘https://api.exemplo.com/produtos’); if (!response.ok) { throw new Error(`Erro HTTP: ${response.status}`); } const data = await response.json(); return data; } </code></pre>
POST com JSON (enviar dados)
<pre><code>async function criarPedido(pedido) { const response = await fetch('https://api.exemplo.com/pedidos', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(pedido) }); if (!response.ok) { const texto = await response.text(); throw new Error(`Falha ao criar pedido (${response.status}): ${texto}`); } return response.json(); } </code></pre>
Timeout e cancelamento (AbortController)
Nem toda rede é confiável. Cancelar requisições evita UI travada e condições de corrida:<pre><code>async function buscarComTimeout(url, timeoutMs = 8000) { const controller = new AbortController(); const timer = setTimeout(() => controller.abort(), timeoutMs); try { const response = await fetch(url, { signal: controller.signal }); if (!response.ok) throw new Error(`HTTP ${response.status}`); return await response.json(); } finally { clearTimeout(timer); } } </code></pre>
3) CORS: por que o navegador bloqueia e como resolver do jeito certo
CORS (Cross-Origin Resource Sharing) é uma política de segurança do navegador. Ela impede que um site em um “origin” (combinação de protocolo + domínio + porta) acesse recursos de outro origin sem permissão explícita do servidor.
Exemplo de origins diferentes:
- https://site.com e https://api.site.com (domínios diferentes)
- http://localhost:3000 e http://localhost:8080 (portas diferentes)
- http:// e https:// (protocolos diferentes)
O que é “preflight” (requisição OPTIONS)
Em muitas requisições (principalmente com headers customizados, métodos como PUT/DELETE ou Content-Type não simples), o navegador faz antes um OPTIONS para perguntar ao servidor se aquela chamada é permitida. Se o servidor não responder com os headers CORS corretos, o navegador bloqueia, mesmo que a API “funcione” fora do browser.
Headers CORS mais comuns
- Access-Control-Allow-Origin: quais origens podem acessar (ex.: https://meusite.com).
- Access-Control-Allow-Methods: métodos permitidos (GET, POST…).
- Access-Control-Allow-Headers: headers permitidos (Authorization, Content-Type…).
- Access-Control-Allow-Credentials: se permite cookies/credenciais.
O jeito correto de “resolver CORS”
CORS é resolvido no servidor (ou via proxy/reverse proxy). No front-end, não existe uma configuração mágica que “libere CORS” com segurança. Extensões do navegador e flags de desativar segurança só servem para testes locais e mascaram problemas reais.
Se você controla o backend, habilite CORS para os domínios necessários e apenas eles. Se você não controla, opções comuns são:
- Consumir a API pelo seu backend (BFF/proxy) e expor um endpoint no mesmo origin do front-end.
- Usar um gateway/reverse proxy (por exemplo, Nginx) para unificar o origin.
Referência externa útil: documentação do MDN sobre CORS em https://developer.mozilla.org/pt-BR/docs/Web/HTTP/CORS.
4) Autenticação no front-end: Bearer token, cookies e boas práticas
Ao consumir APIs com áreas logadas, é comum usar:
- Bearer Token no header Authorization (frequentemente JWT).
- Cookies (sessão), com atenção para SameSite/Secure/HttpOnly.
Bearer token com fetch
<pre><code>async function buscarPerfil(token) { const response = await fetch('https://api.exemplo.com/me', { headers: { 'Authorization': `Bearer ${token}`, 'Accept': 'application/json' } }); if (response.status === 401) { throw new Error('Não autorizado: faça login novamente.'); } if (!response.ok) { throw new Error(`Erro: ${response.status}`); } return response.json(); } </code></pre>
Com cookies (credentials)
Quando a API autentica via cookie, você pode precisar enviar credenciais:<pre><code>await fetch(‘https://api.exemplo.com/me’, { credentials: ‘include’ }); </code></pre>
Atenção: para isso funcionar entre origens, o servidor precisa configurar CORS com Access-Control-Allow-Credentials: true e não pode usar Allow-Origin com <code>*</code> ao mesmo tempo.
5) Tratamento de erros: o padrão que evita bugs silenciosos
Um detalhe importante: o fetch não falha (reject) automaticamente para HTTP 404/500; ele só rejeita em erros de rede. Por isso, sempre valide <code>response.ok</code> e trate respostas não-JSON quando necessário.
Checklist rápido de depuração:
- Abra a aba Network do DevTools e confira URL, método, status e headers.
- Veja o body de erro (muitas APIs retornam mensagens úteis).
- Procure por requisição OPTIONS antes do GET/POST (sinal de preflight).
- Confirme se o endpoint é HTTPS e se o certificado é válido.
- Valide se o token está presente e não expirou.
6) Como escolher o que estudar em seguida (trilha recomendada)
Para evoluir do “consumo básico” para aplicações profissionais, a sequência costuma funcionar muito bem:
- HTML e CSS para estruturar e apresentar os dados vindos da API.
- JavaScript para requisições, estado de UI, validações e interação.
- Consumo de APIs (HTTP, fetch, CORS, autenticação e segurança).
- Frameworks quando fizer sentido (por exemplo, bibliotecas para UI e gerenciamento de estado).
Explore cursos por assunto: https://cursa.app/cursos-gratuitos-online/javascript, https://cursa.app/cursos-gratuitos-online/html e https://cursa.app/cursos-gratuitos-online/css. Se o objetivo também inclui trabalhar com integrações e páginas dinâmicas no lado do servidor, há materiais de https://cursa.app/cursos-gratuitos-online/php para complementar.
Conclusão
Entender HTTP, dominar o fetch e saber lidar com CORS transforma o consumo de APIs em algo previsível: você para de “tentar até funcionar” e passa a diagnosticar com clareza o que está acontecendo entre navegador e servidor. Esse conhecimento eleva a qualidade do front-end, melhora a segurança e reduz tempo perdido com erros que parecem misteriosos.
