Blog Voicefy
Voltar ao site

Desvendando o CORS: Um Guia Detalhado Sobre o Erro 'Quick help with CORS error'

Por Mizael Xavier
Desvendando o CORS: Um Guia Detalhado Sobre o Erro 'Quick help with CORS error'

Introdução ao CORS e o Famoso Erro no Desenvolvimento Web

No universo do desenvolvimento web, um dos obstáculos mais comuns que desenvolvedores, tanto iniciantes quanto experientes, encontram é o infame erro de CORS (Cross-Origin Resource Sharing). Uma rápida pesquisa em fóruns como o Reddit, especificamente no subreddit r/webdev, revela inúmeras discussões sobre o tema, como a intitulada "Quick help with CORS error". Este artigo visa desmistificar o CORS, explicar por que esses erros ocorrem e como solucioná-los de forma eficaz, baseando-se em informações consolidadas e conhecimento especializado na área.

O Que é CORS (Cross-Origin Resource Sharing)?

CORS é um mecanismo de segurança implementado pelos navegadores web que gerencia como os recursos de um servidor podem ser solicitados por um domínio (origem) diferente daquele que serviu a página web inicial. Por padrão, os navegadores restringem as requisições HTTP de origem cruzada iniciadas por scripts por motivos de segurança, uma política conhecida como Same-Origin Policy (Política de Mesma Origem). O CORS permite uma flexibilização controlada dessa política. Quando um aplicativo web tenta fazer uma chamada "entre origens" para obter um "recurso compartilhado" de um serviço web externo, isso é conhecido como uma requisição CORS.

Uma "origem" é definida pela combinação do esquema (por exemplo, HTTP ou HTTPS), nome do host (domínio) e porta. Se qualquer um desses três componentes for diferente entre a página que faz a solicitação e o servidor que a recebe, a solicitação é considerada de origem cruzada.

Anatomia de um Erro de CORS

O erro de CORS geralmente se manifesta no console do navegador com mensagens como "No 'Access-Control-Allow-Origin' header is present on the requested resource" ou "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource". Isso indica que o servidor de destino não retornou os cabeçalhos HTTP necessários para permitir a solicitação de origem cruzada. Essas mensagens podem ser frustrantes, mas são um sinal de que o mecanismo de segurança do navegador está funcionando conforme o esperado.

Por Que os Erros de CORS Acontecem?

Os erros de CORS ocorrem fundamentalmente porque o servidor que hospeda o recurso solicitado não está configurado para permitir requisições de outras origens, ou da origem específica que está tentando acessá-lo. O navegador, ao receber a resposta do servidor sem os cabeçalhos CORS apropriados, bloqueia o acesso do script do lado do cliente à resposta. É crucial entender que o CORS não é um mecanismo de bloqueio do lado do servidor, mas sim uma política imposta pelo navegador para proteger o usuário.

Requisições Simples vs. Requisições Preflighted

Nem todas as requisições de origem cruzada acionam uma verificação "preflight". Algumas requisições, chamadas de "simples", não necessitam dessa etapa. São consideradas requisições simples aquelas que utilizam os métodos GET, HEAD ou POST (com tipos de conteúdo específicos e sem cabeçalhos customizados). A lógica por trás disso é que formulários HTML já permitiam o envio de requisições simples para qualquer origem antes mesmo da existência do CORS.

No entanto, para requisições que podem ter implicações nos dados do usuário (por exemplo, usando métodos como PUT, DELETE, ou que incluem cabeçalhos customizados), o navegador envia automaticamente uma requisição HTTP preliminar usando o método OPTIONS. Essa é a chamada "preflight request" (requisição de sondagem). Seu objetivo é verificar com o servidor se a requisição real é segura para ser enviada. O servidor, por sua vez, precisa responder a essa requisição OPTIONS com os cabeçalhos CORS apropriados, indicando que entende o protocolo CORS e permite a requisição subsequente.

Principais Cabeçalhos HTTP Envolvidos no CORS

A comunicação CORS é baseada em um conjunto de cabeçalhos HTTP. Os mais importantes incluem:

Do Lado da Requisição (Enviados pelo Navegador):

  • Origin: Indica a origem da requisição (esquema, host e porta).
  • Access-Control-Request-Method: Usado em requisições preflight para informar ao servidor qual método HTTP será usado na requisição real.
  • Access-Control-Request-Headers: Usado em requisições preflight para informar ao servidor quais cabeçalhos HTTP serão usados na requisição real.

Do Lado da Resposta (Enviados pelo Servidor):

  • Access-Control-Allow-Origin: Especifica quais origens têm permissão para acessar o recurso. Pode ser um único domínio, um asterisco (*) para permitir qualquer origem (o que pode ser inseguro se credenciais estiverem envolvidas), ou `null` (que não deve ser usado). Se o servidor suportar clientes de múltiplas origens, ele deve retornar a origem específica do cliente que está fazendo a requisição.
  • Access-Control-Allow-Methods: Indica quais métodos HTTP (GET, POST, PUT, DELETE, etc.) são permitidos ao acessar o recurso.
  • Access-Control-Allow-Headers: Lista os cabeçalhos HTTP que podem ser usados durante a requisição real.
  • Access-Control-Allow-Credentials: Indica se o navegador pode incluir credenciais (como cookies ou tokens de autorização) na requisição. Se definido como `true`, o `Access-Control-Allow-Origin` não pode ser `*`.
  • Access-Control-Expose-Headers: Permite que o servidor indique quais cabeçalhos da resposta podem ser expostos ao script do lado do cliente.
  • Access-Control-Max-Age: Indica por quanto tempo (em segundos) a resposta de uma requisição preflight pode ser armazenada em cache pelo navegador, evitando a necessidade de enviar uma nova requisição preflight para cada solicitação subsequente.

Como Solucionar Erros de CORS

A solução para erros de CORS geralmente envolve a configuração do servidor para enviar os cabeçalhos de resposta corretos. A forma de fazer isso varia dependendo da tecnologia do servidor.

Configurando CORS em Servidores Populares:

Node.js com Express

Para aplicações Node.js utilizando o framework Express, a maneira mais comum de habilitar o CORS é utilizando o middleware `cors`. Primeiro, instale o pacote:

npm install cors

Depois, no seu arquivo principal do servidor (geralmente `app.js` ou `server.js`), use o middleware:

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

// Habilita CORS para todas as origens
app.use(cors());

// Para permitir apenas uma origem específica:
// app.use(cors({ origin: 'http://meufrontend.com' }));

// Para configurar opções mais avançadas:
// const corsOptions = {
//   origin: 'http://example.com',
//   methods: ['GET', 'POST'],
//   allowedHeaders: ['Content-Type', 'Authorization'],
//   optionsSuccessStatus: 200 // Alguns navegadores legados (IE11, SmartTVs) engasgam com 204
// };
// app.use(cors(corsOptions));

app.get('/api/dados', (req, res) => {
  res.json({ message: 'Dados protegidos por CORS!' });
});

app.listen(3001, () => {
  console.log('Servidor rodando na porta 3001 com CORS habilitado');
});

O pacote `cors` oferece diversas opções de configuração para definir origens permitidas, métodos, cabeçalhos, etc.

Servidor Apache

No Apache, o CORS é geralmente habilitado através do módulo `mod_headers`. Você pode adicionar as diretivas no arquivo de configuração principal (`httpd.conf` ou `apache.conf`), em um arquivo `.htaccess`, ou na configuração de um Virtual Host. Primeiro, certifique-se de que o módulo `mod_headers` está ativo (geralmente está por padrão).

a2enmod headers # Comando para habilitar o módulo no Debian/Ubuntu

Depois, adicione as seguintes linhas à sua configuração:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
  # Para uma origem específica:
  # Header set Access-Control-Allow-Origin "https://meudominio.com"
  # Para múltiplos domínios, pode ser necessário lógica mais complexa ou repetir para cada origem se o servidor não suportar dinamicamente.
  Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type, Authorization"
  # Header set Access-Control-Allow-Credentials "true" # Se necessário
</IfModule>

Reinicie o Apache após fazer as alterações. O uso de `set` em vez de `add` para `Header` é geralmente mais seguro para evitar a adição múltipla do mesmo cabeçalho.

Servidor Nginx

Para o Nginx, você pode adicionar os cabeçalhos CORS no bloco `server` ou `location` do seu arquivo de configuração (geralmente `nginx.conf` ou um arquivo específico do site em `sites-available`).

server {
    listen 80;
    server_name api.meudominio.com;

    location / {
        # Lógica para requisições preflight OPTIONS
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '$http_origin' always; # Reflete a origem da requisição
            # Ou para uma origem específica: add_header 'Access-Control-Allow-Origin' 'https://meudominio.com' always;
            # Ou para todas as origens: add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, User-Agent, DNT, Cache-Control, X-Mx-ReqToken, X-Requested-With' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always; # Se necessário
            add_header 'Access-Control-Max-Age' 1728000; # Cache de preflight por 20 dias
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204; # Resposta para OPTIONS
        }

        # Adicionar cabeçalhos para requisições GET, POST, etc.
        if ($request_method ~* '(GET|POST|PUT|DELETE)') {
            add_header 'Access-Control-Allow-Origin' '$http_origin' always;
            # Ou para uma origem específica: add_header 'Access-Control-Allow-Origin' 'https://meudominio.com' always;
            # Ou para todas as origens: add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always; # Se necessário
        }

        # Configuração do proxy_pass ou root para servir o conteúdo
        # proxy_pass http://backend_server;
        # root /var/www/html;
    }
}

O parâmetro `always` (disponível a partir do Nginx 1.7.5) garante que os cabeçalhos sejam adicionados mesmo que a resposta seja um erro (4xx ou 5xx). Para múltiplas origens permitidas de forma dinâmica, pode-se usar a variável `$http_origin` no valor do cabeçalho `Access-Control-Allow-Origin` após validar `$http_origin` contra uma lista de domínios permitidos usando uma diretiva `map`.

E se eu não tiver acesso ao servidor?

Se você está consumindo uma API de terceiros e não tem controle sobre a configuração do servidor, a situação é mais complexa. Algumas alternativas incluem:

  • Usar um proxy: Configurar um servidor proxy próprio que faça a requisição à API de terceiros e adicione os cabeçalhos CORS necessários antes de retornar a resposta ao seu frontend. O frontend faria a requisição ao seu proxy (que estaria na mesma origem ou configurado com CORS para o seu frontend), e o proxy lidaria com a requisição de origem cruzada.
  • JSONP (JSON with Padding): Uma técnica mais antiga que contorna a política de mesma origem explorando o fato de que tags `