Introdução
No desenvolvimento web moderno, é comum que aplicações precisem interagir com recursos hospedados em diferentes domínios. No entanto, devido a preocupações de segurança, navegadores implementam uma política de mesma origem (Same-Origin Policy), que restringe como documentos ou scripts carregados de uma origem podem interagir com recursos de outra. O CORS (Cross-Origin Resource Sharing) é um mecanismo que permite que servidores indiquem de forma segura quais origens têm permissão para acessar seus recursos.
O que é CORS?
CORS é um conjunto de cabeçalhos HTTP que permitem que um servidor indique quais origens são permitidas a acessar recursos no servidor. Quando uma aplicação cliente (como um navegador) faz uma solicitação a um recurso hospedado em um domínio diferente, o navegador envia uma solicitação de pré-verificação (preflight request) para o servidor, perguntando se a origem da aplicação tem permissão para acessar o recurso.
Funcionamento do CORS
Solicitação de Pré-Verificação (Preflight Request)
Para determinadas solicitações (especialmente aquelas que não são consideradas "simples"), o navegador primeiro envia uma solicitação de pré-verificação usando o método HTTP OPTIONS. Esta solicitação inclui cabeçalhos como:
-
Origin: Indica a origem do pedido. -
Access-Control-Request-Method: O método HTTP que será usado na solicitação real. -
Access-Control-Request-Headers: Os cabeçalhos HTTP que serão enviados na solicitação real.
Resposta à Pré-Verificação
O servidor responde à solicitação de pré-verificação com cabeçalhos que indicam se a solicitação real é permitida:
-
Access-Control-Allow-Origin: Indica quais origens podem acessar o recurso. Pode ser um domínio específico ou um asterisco (*) para permitir todas as origens. -
Access-Control-Allow-Methods: Lista os métodos HTTP permitidos (como GET, POST, PUT, DELETE). -
Access-Control-Allow-Headers: Lista os cabeçalhos que podem ser usados na solicitação real. -
Access-Control-Allow-Credentials: Indica se as credenciais (como cookies) podem ser incluídas na solicitação. -
Access-Control-Max-Age: Indica por quanto tempo a resposta de pré-verificação pode ser armazenada em cache pelo navegador.
Solicitações Simples
Solicitações consideradas "simples" pelo padrão CORS não exigem pré-verificação. Para uma solicitação ser simples, deve usar um dos métodos GET, POST ou HEAD e deve conter apenas cabeçalhos seguros como Accept, Content-Type (com certos valores), entre outros.
Exemplos de Cabeçalhos CORS
Configuração de um Servidor com Permissão para Uma Origem Específica
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
Configuração de um Servidor para Permitir Todas as Origens
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type
Permissão para Credenciais
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
Implementação no Lado do Servidor
Exemplo em Node.js com Express
const express = require('express');
const cors = require('cors');
const app = express();
const corsOptions = {
origin: 'https://example.com',
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type'],
credentials: true
};
app.use(cors(corsOptions));
app.get('/data', (req, res) => {
res.json({ message: 'This is CORS-enabled for https://example.com' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Conclusão
CORS é um mecanismo essencial para permitir interações seguras entre origens diferentes na web. Entender como configurar e utilizar CORS corretamente pode melhorar a segurança e funcionalidade das suas aplicações web. Espero que este artigo tenha esclarecido os fundamentos do CORS e fornecido um ponto de partida para sua implementação.
Top comments (0)