CORS: o que é e onde resolver os problemas relacionados a ele?

Cross Origin Resource Sharing (CORS)

É uma restrição imposta apenas pelo navegador (e somente ele) para que somente domínios autorizados possam acessar os dados no servidor por meio de scripts, seja ele XMLHttpRequest ou Fetch API.

A validação funciona por meio de cabeçalhos HTTP que são enviados pelo servidor, ou seja, pela resposta que é recebida ao fazer um fetch de dados pelo navegador.

Os cabeçalhos principais são dois:

• Access-Control-Allow-Origin - Define quais as origens (domínios) que tem permissão para acessar o servidor
• Access-Control-Allow-Methods - Define quais métodos podem ser acessados pelas origens permitidas

Exemplo da resposta do servidor (usando o site do Twitter como exemplo), informando quais são os domínios que podem ter acesso aos dados (nesse caso apenas 'https://twitter.com'):

A validação é realizada pelo navegador porém quem controla esse acesso é o servidor. Ao contrário do que muitos pensam, a correção para problemas relacionados à CORS é sempre no servidor (back-end).

Em algumas requisições, é necessário enviar uma request preliminar chamada de preflighted request. Ela utiliza o método OPTIONS do HTTP, informando o método e domínio que será invocado para assim garantir que a requisição seguinte possa ser realizada.

Referência: https://www.treinaweb.com.br/blog/o-que-e-cors-e-como-resolver-os-principais-erros

Segurança

CORS é mais uma camada de segurança que sua aplicação pode usar para evitar acessos de terceiros não autorizados, mal intencionados ou não. Caso não haja uma barreira de CORS um ataque de brute fica um pouco mais complicado de ser feito contra a sua aplicação.

Mas lembrando, CORS não garante a segurança de sua aplicação! É apenas uma das várias opções e você deve sempre se manter o máximo seguro.

O que são domínios diferentes?

O mesmo domínio que o/do servidor é aceito automaticamente. Porém, domínios distintos* devem ser configurados no servidor para que o acesso seja liberado.

*O navegador considera como um domínio distinto quando ele é diferente da origem em: domínio do site, protocolo ou porta
Exemplo:

Nem todas as requisições realizadas no front necessitam de acesso explícito no CORS. Aqui estão as que necessitam:

• Chamadas XMLHttpRequest ou Fetch API quando a comunicação é feita entre origens (domínios) diferentes.
• Web Fonts (para o uso de fontes em @font no CSS)
• Texturas WebGL
• Frames de Imagens/vídeos desenhados em uma tela usando drawImage()

Referência: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/CORS#quais_solicitações_usam_o_cors