Sobre CORS

[lagden]

Se você é um programador FRONTEND e está com problemas de CORS, a culpa é do programador BACKEND.

Thiago Lagden

O que é CORS?

É um mecanismo que usa cabeçalhos adicionais para informar o navegador que o aplicativo web tenha permissão para acessar recursos selecionados de um servidor com uma origem diferente.

Veja a documentação completa no MDN.

Exemplo

Neste repositório temos uma API (Backend) e temos um formulário (Frontend) que consome a API.

Instalação

Faça o clone do projeto:

$ git clone git@github.com:lagden/cors-exemplo.git cors
$ cd cors

Abra cada pasta (back, front) em um terminal diferente e execute os commandos:

$ npm i
$ npm start

---

O nosso backend está rodando na porta 3000 e o nosso frontend na porta 3131, ou seja, teremos problema de CORS

Abra o frontend (http://[::1]:3131/) no seu navegador, o devtools e faça um login.

---

Aconteceu como esperado!
Agora, abra o código do back: cors/back/src/index.js, remova // da linha 14 e salve

Se ainda estiver rodando, o nodemon dará o restart para você.

---

Vamos voltar para o navegador e disparar o login novamente:

wallah!!! Work like a charm

WTF?

Mas o que aconteceu?! Magia negra?!
Não, apenas colocamos no backend a permissão de acesso para o endereço do frontend.

Observe que agora no cabeçalho de resposta do backend existe a propriedade:

Access-Control-Allow-Origin: http://[::1]:3131

Resumo

Problema de CORS tem que ser ajustado no backend adicionando os cabeçalhos necessários.
Existe esse site que pode ajudar: https://enable-cors.org/