O que é, e para que serve o CORS (Cross-Origin Resource Sharing)?

Vinnicius Gomes
3 min readSep 12, 2023
Foto de Morgane Perraud na Unsplash

Antes de mais nada, aposto que você já teve algum problema com CORS durante sua vida como dev, você já deve ter visto uma imagem como essa:

Mas para que o CORS realmente serve? Vem comigo que vou te explicar…

CORS (Cross-Origin Resource Sharing) é um mecanismo de segurança em navegadores que restringe as solicitações HTTP de um domínio a outro domínio diferente do qual a solicitação foi originada. Em outras palavras, o CORS permite que um servidor especifique quais outros domínios podem acessar seus recursos por meio de solicitações HTTP.

Por que o CORS é necessário?

A restrição de recursos por meio do CORS é uma medida de segurança implementada pelos navegadores para impedir que sites maliciosos acessem dados confidenciais de outros sites. Sem o CORS, um site poderia carregar recursos de outros sites, como imagens e scripts, e acessar dados confidenciais, como cookies e tokens de autenticação. Isso é conhecido como ataque de cross-site scripting (XSS) e pode ser usado para roubar informações confidenciais dos usuários.

Como o CORS funciona?

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Quando um navegador faz uma solicitação HTTP para outro domínio, o servidor do domínio de destino verifica se a solicitação é permitida com base nas informações fornecidas no cabeçalho da solicitação. O servidor responde com um cabeçalho que indica se a solicitação é permitida ou não.

Existem dois tipos de solicitações que o navegador pode fazer: solicitações simples e preflight requests.

As solicitações simples incluem solicitações GET, POST e HEAD, que não incluem nenhum cabeçalho personalizado. Essas solicitações são permitidas pelo CORS por padrão, a menos que o servidor especifique o contrário.

As solicitações prefligh são solicitações que incluem cabeçalhos personalizados ou usam métodos HTTP não padrão, como PUT e DELETE. Antes de fazer a solicitação real, o navegador faz uma solicitação OPTIONS (preflight request) para verificar se a solicitação é permitida. O servidor responde com um cabeçalho Access-Control-Allow-Methods que especifica quais métodos HTTP são permitidos, bem como um cabeçalho Access-Control-Allow-Headers que especifica quais cabeçalhos personalizados são permitidos.

Como permitir solicitações CORS?

Para permitir solicitações CORS, o servidor deve enviar cabeçalhos Access-Control-Allow-Origin na resposta. O cabeçalho Access-Control-Allow-Origin especifica os domínios que têm permissão para acessar o recurso. Por exemplo, o cabeçalho Access-Control-Allow-Origin pode ser definido como “*” para permitir que todos os domínios acessem o recurso, ou pode ser definido como um domínio específico para permitir que apenas esse domínio acesse o recurso.

Além do cabeçalho Access-Control-Allow-Origin, o servidor também pode enviar outros cabeçalhos CORS para especificar quais tipos de solicitações são permitidas, quais cabeçalhos personalizados são permitidos e quanto tempo as respostas em cache podem ser mantidas.

E pronto! 🎉

Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬

Se gostou, dê 1 ou 50 claps 👏

Obrigado pela leitura!

Me acompanhe por aí! 😜

--

--

Vinnicius Gomes

Senior Software Engineer who love to write about Frontend, JavaScript and Web development. See more about me — vinniciusgomes.dev