CORS = Corre gritando?

Você provavelmente já viu esse erro no console do seu navegagor:

e ficou assim:

Mas calma! Vamos entender o que diabos é CORS e como se livrar dele.

Significado da sigla CORS

A sigla CORS significa exatamente:
C - Cross
O - Origin
R - Resource
S - Sharing

Em pt-br seria algo como "Compartilhamento de recursos entre origens distintas".

Entendendo melhor

Agora que nós sabemos o significado da sigla, vamos entender melhor o papel dessa validação de segurança que assusta um pouco no começo, mas não é nenhum bicho de 7 cabeças.
A validação de CORS foi criada para evitar que aplicações de domínios diferentes(e potencialmente não autorizadas) acessem os recursos de outro domínio sem ter uma autorização explícita. Essa autorização explícita é feita via headers (um conjunto deles na verdade).

Ok. Mas como eu resolvo?!

Antes de mais nada, é importante saber onde a validação acontece (isso costuma gerar uma pequena confusão também), e a
resposta é: a validação é feita pelo seu navegador.
Ou seja, se você tentar fazer a mesma requisição via curl, postman, fetch e afins, essa validação não acontece.

Vou tentar separar os cenários mais comuns e como você pode resolver em cada um deles. Vamos lá!

Cenário 1 - A API não é sua

Se você está recebendo esse erro de uma API de terceiro, você vai precisar criar uma API que faça a requisição por você e retorne os dados. Ou conversar com o proprietário sobre a possível inclusão do seu domínio nas configurações de CORS da API dele.

Ex: frontend -> sua API -> API de terceiro

Cenário 2 - A API é sua

Vamos supor que você criou uma API e está tentando acessá-la numa aplicação frontend e o CORS não está deixando você acessar os endpoints. Nesse caso você pode configurar no sua API para adicionar o header Access-Control-Allow-Origin com o domínio da sua aplicação frontend.

Você deve ter visto que pode enviar o header Access-Control-Allow-Origin com o valor *. Isso vai liberar o acesso por qualquer domínio e não é recomendado em ambiente de produção

Também é possível configurar quais métodos HTTP podem ser acessados via Access-Control-Allow-Methods

Ex: frontend -> sua API com CORS liberado para o domínio da aplicação frontend

Cenário 3 - Desabilitar CORS no navegador(cuidado)

Outra possível solução seria dar um "bypass" nessa validação do seu navegador. O que eu não recomendo muito, tendo em vista que o mesmo problema pode acontecer quando você for publicar sua aplicação. Mas se você tiver a garantia de que o ambiente em que você vai precisar publicar está configurado corretamente, vá em frente.

Cada navegador deve ter uma forma de desativar essa validação. Mas lembre-se que é uma validação de segurança, use com cuidado!

É isso! Essa foi uma breve explicação sobre como CORS funciona. Espero ter conseguido ajudar alguém :)

Não deixe de consultar a documentação oficial sobre CORS no MDN