Miguel Dev

Node.js: Como criar um CORS anywhere

Miguel Rodrigues's photo
Miguel Rodrigues
·

3 min read

Table of contents

Se você está tentando usar uma API de terceiro por meio de um navegador e ela está te retornando erros relacionados ao CORS policy como estes:

  • No 'Access-Control-Allow-Origin' header is present on the requested resource

  • Blocked by CORS policy

Erros relacionados ao CORS (Cross-Origin Resource Sharing) acontecem quando seu navegador bloqueia a solicitação que você está tentando fazer por causa de restrições de segurança. Essa política (Same-Origin Policy) de segurança é para proteger usuários de solicitações maliciosas de recursos em diferentes origens. Por padrão é definido pelo navegador que um documento JavaScript faça solicitações para o mesmo domínio, protocolo e porta de onde o documento foi carregado.

Quando uma solicitação é feita em uma origem diferente o navegador faz a seguinte verificação:

  1. Verifica o cabeçalho "Origin" da solicitação, que indica a origem.

  2. Servidor de destino recebe a solicitação e verifica o "Origin" e determina se a origem é permitida.

  3. O Servidor responde com o cabeçalho "Access-Control-Allow-Origin", que especifica quais origens são permititas acessar o recurso. Se a origem estiver na lista, o navegador vai permitir a resposta e a solicitação retorna o recurso.

  4. Se o servidor não enviar o cabeçalho "Access-Control-Allow-Origin" ou se a origem da solicitação não estiver na lista de permitidas, o navegador vai dar block na resposta, você não poderá acessar o recurso e isso vai retornar um erro de CORS.

  5. O servidor pode enviar outros cabeçalhos CORS além do "Access-Control-Allow-Origin", como "Access-Control-Allow-Methods" que especifica métodos HTTP permitidos, "Access-Control-Allow-Headers" que especifica cabeçalhos permitidos e "Access-Control-Allow-Credentials" que permite o uso de credenciais como cookies.

O CORS anywhere pode ser uma solução, mas não deve ser definitiva, porque implica em algumas questões de segurança no seu servidor e também você pode estar violando politicas que restringem seu acesso a ela.

Mas o que é um CORS anywhere?

É um proxy entre o seu navegador e o servidor destino que permite contornar essa política. Com ele você adiciona os cabeçalhos CORS necessários pra fazer a solicitação HTTP, permitindo que você acesse os recursos do servidor destino.

Como criar nosso próprio CORS anywhere?

O forma que vou ensinar aqui vamos criar um servidor com node.js e express no CodeSandbox pela praticidade e também nele da pra hospedar o servidor de graça.

Segue o passo a passo:

  1. Criamos um projeto com npm init e etc. (caso você use CodeSandbox, cria o projeto a partir do template "Basic Express.js Starter".

  2. Instale o Express (que usamos pra criar o servidor) e o cors com o seguinte comando:

     npm i express cors

  1. Crie o arquivo do servidor com o nome de server.js dentro do diretório do projeto e abra no seu editor de código.

  2. Importe as dependências adicionando as seguintes linhas de código no início do arquivo:

     const express = require("express");
 const cors = require("cors");

  3. Ainda no arquivo server.js, configure o servidor Express adicionando as seguintes linhas de código:

     const app = express();
 const PORT = 3000;

 app.use(cors());

  4. Defina a rota principal que irá lidar com as solicitações CORS adicionando as seguintes linhas de código:

     app.get("/", (req, res) => {
   const { url } = req.query;

   if (!url) {
     return res.status(400).json({ error: "Missing URL parameter" });
   }

   const http = require("http");
   http.get(url, (response) => {
     res.set({
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Headers":
         "Origin, X-Requested-With, Content-Type, Accept",
     });

     response.pipe(res);
   });
 });

  5. Inicie o servidor adicionando as seguintes linhas de código:

     app.listen(PORT, () => {
   console.log(`CORS Anywhere server is running on port ${PORT}`);
 });

  6. No terminal, navegue até o diretório do projeto e execute o comando node server.js para iniciar o servidor do CORS Anywhere.

Agora você tem um servidor CORS Anywhere em execução na porta 3000. Você pode enviar solicitações para o servidor usando a rota principal localhost:3000/?url=<URL_DESEJADA>, onde <URL_DESEJADA> é a URL que você deseja acessar através do servidor CORS Anywhere.

Node.jsCORS