Creio que muitos desenvolvedores, sejam front-end ou back-end, já se encontraram na situação de se perguntarem o que é CORS. Você mexe ali e mexe aqui, mas não consegue entender o porquê daquela mensagem de erro estar ali e muito menos como resolver o problema. E é justamente por isso que resolvi escrever este texto, para ajudar quem ainda enfrenta esses problemas ou quem já enfrentou e tem curiosidade de saber como funciona esse mecanismo.

Porém, antes de responder a essa pergunta, preciso responder outra: o que é SOP — ou melhor, Política de Mesma Origem? SOP é um mecanismo de segurança utilizado por navegadores web aplicado em requisições JavaScript. Ele tem o intuito de impedir que sites maliciosos executem scripts ou acessem dados de outras origens sem permissão. Para entendermos como funciona a SOP, é necessário compreender o que é a "origem", mencionada no nome desse mecanismo. Origem é a composição de três partes da URL: protocolo, domínio e porta.

origem = protocolo://domínio:porta

Para exemplificar, digamos que temos a URL http://localhost:3000/customers. Neste exemplo, a origem dessa URL seria apenas http://localhost:3000 — pois tudo o que vem após a porta já não faz parte da origem de uma URL.

A SOP estabelece que as requisições só podem ser feitas entre recursos que compartilham a mesma origem. Ou seja, uma requisição é permitida apenas se a origem de onde ela é enviada for a mesma de onde o recurso está sendo solicitado. Isso significa que, se o front-end de uma aplicação estiver em http://localhost:3000 e tentar acessar uma API em http://localhost:4000, a requisição será bloqueada pelo navegador, pois as origens são diferentes.

Agora que entendemos a SOP, podemos falar sobre CORS. Mas, afinal, o que é CORS? Como vimos acima, algumas requisições podem ser bloqueadas pela Política de Mesma Origem, e isso ocorre quando a origem de uma URL de onde a requisição foi enviada difere da origem da URL da requisição de destino. Não é incomum que essa diferença aconteça, por exemplo, quando o front-end de uma aplicação faz requisições a uma API — as duas muito provavelmente terão origens diferentes.

Por conta disso, existe o CORS — Cross-Origin Resource Sharing, em português, Compartilhamento de Recursos com Origens Diferentes. É um mecanismo que procura flexibilizar as regras da Política de Mesma Origem e utiliza cabeçalhos HTTP para informar ao navegador se uma determinada requisição pode ser permitida. Então, toda vez que a requisição fere a Política de Mesma Origem, ela passa a ser uma requisição do tipo CORS.

Então, o que fazer para possibilitar que uma aplicação no back-end receba requisições de origens diferentes da sua? Isso pode ser feito adicionando um cabeçalho (ou header, como preferir chamar) HTTP chamado Access-Control-Allow-Origin. Esse cabeçalho é responsável por indicar se os recursos da resposta à requisição podem ser compartilhados com a origem recebida. Ao adicionarmos esse cabeçalho à aplicação, devemos atribuir a ele as origens que permitiremos que façam requisições à aplicação.

Por exemplo, se quisermos permitir que uma aplicação hospedada em https://www.exemplo.com faça requisições ao nosso back-end, podemos configurar o cabeçalho da seguinte forma:

Access-Control-Allow-Origin: https://www.exemplo.com

Com isso, a aplicação da origem informada passa a ter permissão para realizar requisições à outra aplicação, mesmo que ambas possuam origens diferentes. O tipo da requisição é automaticamente alterado de "basic" para "cors", indicando que se trata de uma requisição entre origens distintas.

Há casos em que uma aplicação — como APIs públicas, por exemplo — deseja receber requisições independentemente da origem. Ou seja, qualquer um que tente fazer requisições a esse tipo de aplicação terá uma resposta de sucesso, desde que a requisição seja feita corretamente. Isso é possível graças a um recurso chamado Wildcard, ou curinga em português, que permite que, independentemente da requisição recebida, ela seja autorizada. Para habilitar essa função, basta configurar o valor do cabeçalho com um asterisco (*):

Access-Control-Allow-Origin: *

Com isso, qualquer origem pode fazer requisições à aplicação, e todas serão permitidas.

Enfim, chegamos ao final desta explicação sobre o CORS. Espero que tenha ficado mais claro em sua mente o funcionamento desse mecanismo, como e quando usá-lo. O CORS é uma ferramenta essencial para permitir a comunicação segura entre aplicações de origens diferentes, e entender seu funcionamento é crucial para desenvolvedores front-end e back-end. Espero ter ajudado. Bons estudos!