Configuração de Cookies em Requisições CORS Usando Express e Axios

O que é uma requisição CORS?

CORS, ou Cross-Origin Resource Sharing (Compartilhamento de Recursos entre Diferentes Origens), é um mecanismo que utiliza cabeçalhos adicionais para controlar as permissões de acesso a dados de servidores de origens distintas. Por exemplo, quando seu frontend está hospedado em http://x.com e precisa acessar dados de uma API em http://y.com, essa é uma requisição cross-site. Os navegadores, por questões de segurança, bloqueiam esse tipo de requisição iniciada por scripts (como fetch ou axios.get) a menos que os cabeçalhos CORS apropriados sejam configurados corretamente no servidor.

A importância dos cookies

Quando uma aplicação precisa autenticar um usuário para conceder acesso a certas rotas, uma solução eficaz é o uso de cookies. Esses pequenos pedaços de texto, enviados do servidor para o navegador, atuam como credenciais de acesso. Após a autenticação, o navegador armazena os cookies e os envia nas solicitações subsequentes para o mesmo servidor, permitindo que o usuário permaneça logado sem precisar inserir as credenciais novamente.

Configurando o CORS no Backend

Se seu frontend está hospedado em http://x.com e o backend em http://y.com, siga os passos abaixo para configurar o CORS usando Express:

1. Instale o pacote CORS:

bash
Copiar código
npm install cors

1. Importe e configure o CORS no seu servidor Express:

javascript
Copiar código
import express from 'express';
import cors from 'cors';

const server = express();
const corsOptions = {
credentials: true,
origin: 'http://a.com',
};

server.use(cors(corsOptions));
server.listen(process.env.PORT || 3200);

A opção credentials habilita o cabeçalho Access-Control-Allow-Credentials, permitindo que informações de autenticação e cookies sejam reconhecidos e enviados. A opção origin define quais domínios podem fazer requisições ao seu servidor; para restringir, coloque o domínio específico do seu frontend.

Para retornar um cookie na resposta do servidor, você deve configurar o método cookie assim:

javascript
Copiar código
return res.status(200)
.cookie('token', token, {
  httpOnly: true,
  maxAge: 30 * 60 * 1000, // 30 minutos
  sameSite: 'none',
  secure: true
})
.json({ mensagem: 'Logado com sucesso' });

Configurando o Frontend com Axios

Instale o Axios no seu frontend:

bash
Copiar código
npm install axios

Crie uma instância do Axios com as configurações básicas:

javascript
Copiar código
import Axios from 'axios';

const axios = Axios.create({
baseURL: 'http://b.com',
withCredentials: true,
headers: {
  'Content-Type': 'application/json',
},
});

export default axios;

A propriedade baseURL define o servidor para onde as requisições serão enviadas, enquanto withCredentials permite que cookies e credenciais sejam incluídos nas requisições.

Fazendo requisições do Frontend para o Backend

Agora, você pode fazer requisições usando a instância criada:

javascript
Copiar código
import axios from './Services/axiosConfig';

axios.get('/').then(res => console.log(res));

Com essas configurações, sua aplicação estará apta a trabalhar com cookies e requisições CORS de forma segura!