Entenda o que é CORS (Cross-Origin Resource Sharing)
Tags: webdev, frontend, security, braziliandevs
Published: 2024-05-30 00:43:33

## 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

```http
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

```http
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type
```

### Permissão para Credenciais

```http
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
```

## Implementação no Lado do Servidor

### Exemplo em Node.js com Express

```javascript
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.