CORS = Corre gritando?
Tags: webdev, beginners, security
Published: 2023-07-10 17:39:30

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

![CORS error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6kt4uvso982j479277u.png)

e ficou assim:


![man screaming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bul9b3so3opo3c3dkbrz.gif)

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_response_headers)).

## 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)