Como resolver o erro de CORS (Cross-Origin Resource Sharing) no desenvolvimento de APIs

Todo desenvolvedor front-end ou full-stack, em algum momento da carreira, já se deparou com um bloco vermelho gigante no console do navegador dizendo algo como: "Access to fetch at 'http://api.exemplo.com' from origin 'http://localhost:3000' has been blocked by CORS policy".

O CORS (Cross-Origin Resource Sharing) não é um bug, é um mecanismo de segurança integrado aos navegadores para impedir que scripts maliciosos façam requisições não autorizadas para domínios diferentes do qual a página foi carregada.

O que realmente é o CORS?

Quando seu site em https://meusite.com tenta buscar dados em https://api.outrosite.com, o navegador realiza uma requisição "Preflight" (geralmente usando o método HTTP OPTIONS). Ele pergunta ao servidor da API: "Ei, o domínio meusite.com tem permissão para acessar esses dados?". Se o servidor não responder explicitamente que SIM, o navegador bloqueia a requisição e exibe o erro.

Como resolver o problema na raiz (no Backend)

A solução correta para o CORS quase sempre deve ser implementada no lado do servidor (API). Você precisa configurar sua API para enviar os cabeçalhos corretos autorizando a origem do seu front-end.

Exemplo 1: Resolvendo no Node.js (Express)

No ecossistema Node.js, a forma mais fácil é utilizando o pacote `cors`. Primeiro instale com npm install cors e depois configure na sua aplicação:

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

// Permite requisições de um domínio específico (Recomendado para produção)
app.use(cors({
    origin: 'https://meusite.com'
}));

// Ou permite de qualquer origem (Apenas para desenvolvimento!)
// app.use(cors());

app.get('/api/dados', (req, res) => {
    res.json({ mensagem: 'CORS resolvido!' });
});

Exemplo 2: Resolvendo com cabeçalhos manuais (PHP puro)

Se você não usa frameworks, pode forçar os cabeçalhos no topo do seu arquivo antes de qualquer output:

header("Access-Control-Allow-Origin: https://meusite.com");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}