CORS explicado com calma
Entenda por que o navegador bloqueia requisições e como configurar CORS corretamente no backend Node.js.
- #Curso de Frontend
- #Segurança e APIs
- #CORS
- #Express
- #Segurança
- #API
Por que CORS aparece?
Quando você começa a integrar frontend com backend, pode aparecer um erro de CORS no navegador. Ele existe porque o navegador tenta proteger o usuário contra acessos indevidos entre origens diferentes.
Origem é a combinação de protocolo, domínio e porta. Se qualquer uma dessas partes muda, o navegador considera uma origem diferente.
protocolo
domínio
portaCORS não é erro do React
React apenas tenta fazer a requisição. Quem decide bloquear é o navegador, com base nos headers enviados pelo backend.
Por isso, a correção deve ser feita no backend Express, não no componente React.
Instalando e usando cors
No backend Node.js com Express, usaremos a biblioteca cors. Ela já foi instalada no post de criação do backend com npm install express cors dotenv mysql2.
Abra backend-node/src/server.js. No topo do arquivo, importe cors. Depois de criar const app = express(); e antes das rotas, adicione app.use(cors(...)).
Lendo o código: import cors carrega a biblioteca e app.use registra um middleware. Middleware é uma função que roda antes das rotas e prepara ou valida a requisição.
A opção origin informa qual frontend pode chamar esse backend pelo navegador. Neste curso, liberamos http://localhost:5173 porque é a URL local do Vite.
import cors from "cors";
app.use(cors({
origin: "http://localhost:5173"
}));Origem configurável
Quando usarmos .env, a origem permitida poderá mudar conforme o ambiente. Assim você não precisa alterar o código para trocar a URL do frontend.
No server.js, coloque essa configuração antes das rotas. No arquivo .env do backend, crie a variável CORS_ORIGIN com a URL do frontend.
Lendo o fallback: process.env.CORS_ORIGIN tenta ler a origem do arquivo .env. Se ela não existir, o código usa http://localhost:5173 como valor padrão por causa do operador ||.
const allowedOrigin = process.env.CORS_ORIGIN || "http://localhost:5173";
app.use(cors({
origin: allowedOrigin
}));Preflight
Algumas requisições fazem uma consulta OPTIONS antes da requisição real. Essa consulta é chamada de preflight.
Em uma configuração simples com a biblioteca cors, o Express responde esse tipo de verificação automaticamente para os casos comuns do curso.
Como testar CORS
Primeiro teste o backend diretamente no navegador com http://localhost:3001/api/status. Depois teste pelo frontend rodando em http://localhost:5173.
Se a rota abre direto no navegador, mas falha quando chamada pelo frontend, confira se CORS_ORIGIN está igual à URL exibida pelo Vite no terminal do frontend.
CORS não protege seu banco
CORS é uma proteção do navegador. Ele não substitui autenticação, validação, autorização, variáveis de ambiente ou segurança de banco.
Mesmo com CORS configurado, o backend ainda precisa validar dados recebidos e nunca deve expor senha de banco para o frontend.
