O que é o CORS e alguns de seus erros!

[leandro silva]

Fala Dev, tudo certo?

Venho aqui explicar para vocês um pouco sobre o CORS, mas o que seria essa palavra CORS?

Bom, o CORS é uma biblioteca do NodeJS, onde ele simplesmente define quais endereços web externos podem acessar uma aplicação HTTP que está iniciada através de algum script, como por exemplo: XMLHttpRequest e Fetch API.

Deixando um pouco mais simplificado a teoria, vamos realizar essa explicação através de exemplos. Suponhamos que você esteja criando uma aplicação back-end na porta 45678 que precisa se comunicar com o seu front-end que está na porta 5500.

Utilizando o Fetch API por exemplo sem a utilização do CORS, será retornado um erro. Mas qual seria este erro?

Leandro, eu não consigo compreender essa mensagem de erro, o que eu posso estar fazendo? Vem comigo, que estarei explicando detalhadamente a causa desta rejeição.

A mensagem está comentando o seguinte: Desenvolvedor, estou tentando acessar essa rota que você me informou ‘http://localhost:45678/’ através da rota ‘http://127.0.0.1:5500/’ (o endpoint 127.0.0.1 é o mesmo que localhost), mas essa rota foi bloqueada pela política do CORS. Eu não consigo acessar o que foi solicitado.
Verificamos que na requisição GET foi localizado a rota, mas não há permissão de acesso, devido a isso, temos a terceira rejeição que deu erro na chamada do Fetch devido a falta de permissão.

Um outro caso que podemos identificar nas chamadas da API, é a informação da rota incorreta.

A rota estando incorreta, será retornado a seguinte rejeição, informando que essa rota não foi localizada:

Para corrigir essas rejeição, realizamos a instalação da biblioteca do CORS, realizando o comando no terminal de:

• npm i cors

      ou

• npm install cors

Tendo o mesmo instalado, é preciso buscar ele e utilizar juntamente ao express:

Mas é preciso de uma atenção nessa parte, caso informe somente " * ", o servidor estará disponibilizado para que todos os servidores tenham acesso ao mesmo.

Para que seja realizado a liberação para um único endpoint, você pode estar estabelecendo quais URLs terão permissão de acesso.

Realizando a liberação, os erros serão removidos e será retornado a resposta da requisição:

Estarei disponibilizando também a documentação do CORS caso queiram visualizar alguns outros exemplos de configuração do CORS: Link.

Qualquer dúvida estou a disposição.