Feita a explicação teórica sobre CORS, irei dar um exemplo prático. Para isso utilizarei o Node.js, o runtime desktop do JavaScript, e o framework web Express. Assim, considere os dois códigos abaixo:
Esse código cria um servidor web na porta 3001. Ao acessar o diretório raiz, o servidor retorna um página html. Isso vai representar o front-end da aplicação.
Esse código cria um servidor web na porta 3000. Ao acessar o diretório raiz, o servidor retorna um json com a propriedade message igual a 'Hello World'. Isso vai representar o back-end da aplicação.
Segue abaixo o código html da página servida pelo front-end.
Esse página html mostra o texto 'Hello World' no centro da tela e faz um requisição ao back-end utilizando a FetchAPI. Segue abaixo Uma visualização dessa página html no navegador.
Perceba que como não configuramos o cors no back-end, o navegador retorna um error ao tentar utilizar o FetchAPI.
Para resolver isso, irei adicionar um middleware. Um middleware é um função que irar ser executada antes de qualquer requisição feita ao back-end. No caso desse, seu objetivo vai ser adicionar as diretivas de CORS permitindo os cabeçalhos e a origem do meu front-end (localhost:3001).
Agora, reiniciando o back-end e tentando acessar o front-end, o error de CORS não aparece mais e o retorno do back-end é mostrado.
