Erro de CORS em Produção: causas e como resolver

O erro de CORS (Cross-Origin Resource Sharing) pode causar falhas na comunicação entre o frontend e o backend da sua aplicação, resultando em problemas de funcionalidade e experiência do usuário. Neste artigo, vamos explorar as causas e as soluções para esse erro.

O CORS é um mecanismo de segurança que permite que recursos restritos em uma página da web sejam solicitados de outro domínio fora do domínio do qual o recurso foi servido. Quando um navegador detecta uma solicitação que não está de acordo com as políticas de CORS, ele bloqueia a solicitação e exibe um erro. Isso é comum em aplicações que fazem chamadas a APIs de diferentes origens.

Causas Prováveis do Erro de CORS

• Configuração inadequada do servidor para permitir solicitações de origens específicas.
• Falta de cabeçalhos CORS apropriados nas respostas do servidor.
• Uso de métodos HTTP não permitidos nas requisições.
• Problemas de cache que podem levar a respostas desatualizadas.

Diagnóstico do Erro de CORS

Para diagnosticar o erro de CORS, você pode usar as ferramentas de desenvolvedor do seu navegador (geralmente acessíveis pressionando F12). Na aba de rede, verifique as requisições e as respostas do servidor para identificar se os cabeçalhos CORS estão presentes e corretos.

Correção Passo a Passo

Para resolver o erro de CORS, siga os passos abaixo:

1. Verifique os cabeçalhos CORS no servidor: Certifique-se de que o servidor esteja configurado para incluir os cabeçalhos Access-Control-Allow-Origin, Access-Control-Allow-Methods e Access-Control-Allow-Headers.
2. Permita origens específicas: No cabeçalho Access-Control-Allow-Origin, especifique a origem do seu frontend ou use * para permitir todas as origens (não recomendado em produção).
3. Adicione métodos permitidos: Inclua todos os métodos HTTP que sua API suporta no cabeçalho Access-Control-Allow-Methods.
4. Teste a configuração: Após fazer as alterações, teste novamente a aplicação para verificar se o erro persiste.

Exemplo de Configuração do Servidor

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
  origin: 'https://seu-frontend.com', // Substitua pela URL do seu frontend
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

app.listen(3000, () => {
  console.log('Servidor rodando na porta 3000');
});

Riscos em Produção

Permitir todas as origens pode expor sua API a riscos de segurança, como ataques de CSRF (Cross-Site Request Forgery). É sempre recomendável restringir o acesso às origens necessárias e revisar regularmente as configurações de CORS.

Prevenção de Erros de CORS

Para evitar problemas futuros com CORS, considere as seguintes práticas:

• Documente as origens permitidas e revise-as periodicamente.
• Utilize ambientes de desenvolvimento e produção separados para testar as configurações antes de implementá-las.
• Monitore logs de acesso e erros para identificar problemas rapidamente.

FAQ

O que é CORS?

CORS é um mecanismo de segurança que permite que recursos de uma página da web sejam solicitados de outro domínio.

Como posso testar se o CORS está configurado corretamente?

Use as ferramentas de desenvolvedor do navegador para verificar os cabeçalhos de resposta e as requisições.

É seguro permitir todas as origens?

Não, permitir todas as origens pode expor sua API a riscos de segurança. É melhor restringir a origens específicas.

Causa	Sintoma	Como Confirmar	Correção
Configuração inadequada do servidor	Erro de CORS no console do navegador	Verifique os cabeçalhos da resposta	Adicione cabeçalhos CORS apropriados
Falta de cabeçalhos CORS	Bloqueio de requisições	Teste com ferramentas de desenvolvedor	Configure o servidor para incluir os cabeçalhos
Uso de métodos não permitidos	Erro 405	Verifique os métodos permitidos	Adicione métodos no cabeçalho CORS

Referências e próximos passos

• RFC 9110 — HTTP Semantics
• MDN Web HTTP
• OWASP API Security Project

Para projetar diagnóstico, autenticação e recuperação desde o início, conheça nosso serviço de APIs e integrações.