Erro CORS em React e Node.js: guia completo de correção com exemplos de código

Qual é esse problema?

Erros CORS, ou CrossOrigin Resource Sharing, estão entre os problemas mais comuns que os desenvolvedores enfrentam ao construir aplicativos fullstack com React no frontend e Node.js no backend. Esses erros ocorrem quando um aplicativo da web tenta fazer solicitações para um domínio, protocolo ou porta diferente daquele que atende a página. Em uma configuração típica do React + Node.js, seu aplicativo React pode ser executado em localhost:3000 enquanto seu servidor Express é executado em localhost:5000, acionando restrições de segurança do navegador.

Este problema se manifesta como erros como ‘Acesso para buscar em ‘http://localhost:5000/api/data’ da origem ‘http://localhost:3000’ foi bloqueado pela política CORS: Nenhum cabeçalho ‘AccessControlAllowOrigin’ está presente no recurso solicitado.’ Os iniciantes geralmente ficam frustrados porque o código funciona no Postman, mas falha no navegador. Compreender o CORS é essencial para qualquer desenvolvedor web moderno que trabalhe com APIs.

Por que isso acontece?

🎨 IA gerada: por que isso acontece?

A causa raiz está na política de mesma origem do navegador, um mecanismo de segurança projetado para impedir que sites maliciosos acessem dados confidenciais de outros domínios. Quando o React faz uma chamada de API usando fetch ou Axios para um servidor Node.js em uma origem diferente, o navegador bloqueia a resposta, a menos que o servidor permita explicitamente por meio de cabeçalhos CORS.

Node.js e Express não habilitam o CORS por padrão por motivos de segurança. Sem cabeçalhos como AccessControlAllowOrigin, AccessControlAllowMethods e AccessControlAllowHeaders, o navegador rejeita a solicitação. Fatores como solicitações OPTIONS de simulação para métodos não simples (PUT, DELETE ou cabeçalhos personalizados) agravam o problema. Dados de pesquisas com desenvolvedores mostram que erros de CORS são responsáveis por mais de 25% dos problemas de integração de API em projetos fullstack.

Solução passo a passo

Siga estas etapas para resolver erros de CORS em seu aplicativo React e Node.js.

1. Instale o middleware cors em seu projeto Node.js: npm install cors
2. Importe e use-o em seu arquivo do servidor Express.
3. Configure origens permitidas especificamente para segurança de produção.
4. Atualize suas chamadas de busca do React, se necessário, para credenciais.

Aqui está a implementação completa do servidor:

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

const corsOptions = {
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['ContentType', 'Authorization'],
  credentials: true
};

app.use(cors(corsOptions));
app.use(express.json());

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS fixed successfully!' });
});

app.listen(5000, () => console.log('Server running on port 5000'));

No lado do React, use fetch com credenciais se estiver usando cookies ou autenticação:

fetch('http://localhost:5000/api/data', {
  method: 'GET',
  credentials: 'include',
  headers: {
    'ContentType': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log(data));

Esta configuração garante que o servidor responda com cabeçalhos CORS adequados, permitindo que o navegador aceite a resposta.

Soluções Alternativas

🎨 IA gerada: soluções alternativas

Além do pacote cors, considere estas três abordagens. Primeiro, defina manualmente os cabeçalhos no Express sem middleware para aplicativos leves:

app.use((req, res, next) => {
  res.header('AccessControlAllowOrigin', 'http://localhost:3000');
  res.header('AccessControlAllowHeaders', 'Origin, XRequestedWith, ContentType, Accept');
  next();
});

Segundo, use um proxy no package.json do React durante o desenvolvimento: \”proxy\”: \”http://localhost:5000\”. Isso evita o CORS totalmente no modo de desenvolvimento, roteando solicitações pela mesma origem.

Terceiro, para produção, implemente a configuração baseada no ambiente com dotenv para alternar entre o host local e o domínio implantado, garantindo flexibilidade entre os ambientes.

Erros comuns a serem evitados

Os desenvolvedores geralmente definem a origem como ‘*’, o que funciona para testes, mas cria vulnerabilidades de segurança na produção. Sempre coloque domínios específicos na lista de permissões. Outro erro é esquecer de lidar com solicitações OPTIONS de comprovação, levando ao bloqueio de solicitações complexas. Evite colocar a configuração do CORS após as definições de rota no Express, pois a ordem do middleware é importante. Por fim, não ignore o tratamento de credenciais ao usar tokens ou sessões de autenticação.

Exemplo do mundo real

🎨 IA gerada: exemplo do mundo real

Considere um aplicativo de gerenciamento de tarefas onde o React busca tarefas de uma API Node.js. Depois de implementar o middleware cors com origens e credenciais específicas, o aplicativo carrega dados com êxito e sem erros. Os usuários podem criar, atualizar e excluir tarefas facilmente. O monitoramento com ferramentas como ferramentas de desenvolvimento de navegador mostra o cabeçalho AccessControlAllowOrigin presente nas respostas, confirmando a correção. Esse padrão é dimensionado para aplicativos maiores que lidam com milhares de solicitações diárias.

Perguntas frequentes

P: Por que o CORS funciona no Postman, mas não no React?

R: O Postman não impõe políticas de mesma origem do navegador, portanto, ele ignora totalmente as verificações do CORS.

P: Posso corrigir o CORS apenas no lado do cliente?

R: Não, o CORS deve ser configurado no servidor para enviar cabeçalhos apropriados; as alterações do cliente por si só são insuficientes.

P: Como lidar com múltiplas origens na produção?

R: Use uma matriz em corsOptions.origin ou uma função para verificar dinamicamente os domínios permitidos de um banco de dados ou configuração.

P: E se eu estiver usando o Axios em vez do fetch?

R: Axios respeita as mesmas regras CORS; certifique-se de que os cabeçalhos do servidor estejam configurados corretamente e incluam withCredentials: true para autenticação.

P: A ativação do CORS causa impacto no desempenho?

R: O impacto mínimo ocorre, principalmente a partir de solicitações de comprovação, que podem ser atenuadas com cabeçalhos de cache adequados.

Conclusão

🎨 IA gerada: conclusão

A correção de erros de CORS em React e Node.js requer compreensão da segurança do navegador e configuração adequada do servidor. Ao usar o middleware cors com configurações direcionadas, os desenvolvedores podem criar aplicativos fullstack seguros e funcionais. Lembre-se de aplicar configurações específicas do ambiente e evitar armadilhas comuns para implementações robustas. Este guia fornece tudo o que é necessário para resolver problemas com rapidez e confiança.