Por que o localhost ainda gera erros de CORS
Você executa seu frontend no localhost:3000. Você executa seu backend no localhost:5000. Ambos os apps estão no seu laptop. Mesmo assim, você vê um erro de CORS.
Isso acontece devido à forma como os navegadores definem uma origem.
Uma origem consiste em três partes:
- Protocolo
- Domínio
- Porta
Compare estes dois:
Eles compartilham o mesmo protocolo. Eles compartilham o mesmo domínio. Eles usam portas diferentes.
Os navegadores veem portas diferentes como origens diferentes.
Quando seu app React chama sua API, o navegador vê uma requisição cross-origin. Ele os vê como duas entidades separadas.
Por que essa regra existe? Segurança.
Se os sites pudessem chamar qualquer API livremente, um site malicioso poderia:
- Ler seus dados bancários.
- Acessar APIs privadas.
- Agir em seu nome.
Os navegadores usam a Same-Origin Policy para impedir isso. O Site A não pode acessar o Site B, a menos que o Site B autorize.
CORS significa Cross-Origin Resource Sharing. É uma forma de o seu servidor dizer ao navegador: "Eu confio em requisições desta origem específica."
Você resolve isso adicionando um header ao seu backend: Access-Control-Allow-Origin: http://localhost:3000
Isso informa ao navegador que a requisição é segura.
Um ponto comum de confusão: Você vê a requisição chegar nos logs do seu backend, mas o frontend falha.
Isso acontece porque:
- O frontend envia a requisição.
- O backend recebe a requisição com sucesso.
- O backend envia a resposta com sucesso.
- O navegador recebe a resposta e a bloqueia devido às regras de segurança.
O erro é um recurso de segurança do navegador.
Ferramentas como Postman ou cURL funcionam porque não são navegadores. Elas não aplicam as políticas de segurança dos navegadores.
O navegador ignora o fato de que ambos os apps estão na sua máquina. Ele se importa apenas com a origem.