Curso de FrontendTutorialPublicado em 22 de abril de 20263 min de leitura

Requisições, REST, HTTP e CORS para iniciantes

Fluxo de requisições entre frontend e backend

Entenda como frontend e backend conversam usando HTTP, métodos REST, JSON, status code e CORS.

#Curso de Frontend
#APIs e HTTP
#HTTP
#REST
#CORS
#API

O que é uma requisição?

Uma requisição é um pedido feito de um lugar para outro. Quando o frontend precisa de dados, ele pede ao backend, que processa e devolve uma resposta.

No projeto do curso, o navegador rodará o frontend em uma porta e o backend Node.js rodará em outra. Por isso, é importante entender qual endereço está chamando qual serviço.

HTTP e REST

HTTP é o protocolo usado para comunicação na web. REST é um estilo de organização de APIs usando recursos e métodos HTTP.

Leia os exemplos como endereço mais intenção: GET busca resultados, POST criaria resultados, PUT ou PATCH atualizaria e DELETE apagaria. Nesta etapa do curso, vamos implementar apenas a busca com GET.

Lendo as rotas do exemplo: a primeira palavra é o método HTTP e a segunda parte é o caminho. GET /api/results significa pedir uma lista de resultados; DELETE /api/results/1 significaria apagar o resultado de id 1.

GET /api/results
POST /api/results
PUT /api/results/1
DELETE /api/results/1

Métodos e status code

GET busca dados, POST cria, PUT substitui, PATCH atualiza parte de um recurso e DELETE remove.

Status code indica o resultado da requisição: 200 para sucesso, 201 para criado, 400 para erro do usuário, 404 para não encontrado e 500 para erro interno.

Quando você testar uma rota no navegador ou no DevTools, olhe o status da resposta. Se aparecer 200, a chamada funcionou. Se aparecer 400, 404 ou 500, leia a mensagem retornada pelo backend antes de alterar o frontend.

JSON

JSON é um formato de dados muito usado entre frontend e backend porque é simples de ler e fácil de processar em JavaScript.

O backend enviará uma resposta com message e data. No frontend, vamos ler data para montar os cards e message para mostrar um aviso ao usuário.

Lendo o JSON: message é um texto explicando o resultado da operação e data é a lista de dados. Quando data está entre colchetes, significa que o backend está enviando uma lista, mesmo que ela tenha apenas um item.

{
  "message": "Resultados encontrados",
  "data": [
    {
      "id": 1,
      "title": "HTML para iniciantes"
    }
  ]
}

CORS

CORS é uma regra de segurança do navegador. Ele controla quando uma página pode acessar dados de outra origem, como uma API rodando em porta diferente.

Se o frontend estiver em http://localhost:5173 e o backend em http://localhost:3001, as origens são diferentes por causa da porta. O backend precisa permitir a origem do frontend.

Lendo as URLs: localhost é o próprio computador. A porta 5173 será usada pelo frontend Vite e a porta 3001 pelo backend. Mesmo no mesmo computador, portas diferentes contam como origens diferentes para o navegador.

Frontend: http://localhost:5173
Backend: http://localhost:3001

Fluxo completo

O usuário digita uma busca, o frontend chama GET /api/search?q=termo, o backend consulta o banco, retorna JSON e o frontend atualiza a tela.

Para testar esse fluxo por partes, primeiro faça a rota funcionar no navegador usando http://localhost:3001/api/search?q=html. Só depois conecte o React com Axios.

Voltar ao blog