DEV Community

Carine Batista
Carine Batista

Posted on • Updated on

[PT-BR] - Entenda CORS e saiba lidar com os erros!

Cross-Origin Resource Sharing ou simplesmente CORS para os mais intímos, é um padrão de segurança que permite que um determinado site, a partir de uma URL, solicite dados de outra URL ou API.

Se você é um desenvolvedor front-end, provavemente já se deparou com a seguinte frustante mensagem no seu console em algum momento da vida:

Console com cors error, que assola à todos os programadores

Isso acontece porque os navegadores, por padrão, implementam um politica de origem como parte de modelo de segurança. Essa política permite que os websites acessem e requisitem imagens e dados da mesma URL, mas bloqueia qualquer coisa que provenha de fontes externas, a menos que algumas condições expecíficas e pré-definidas sejam atigindas.

Quando o navegador faz uma requisição, ele adiciona por padrão um cabeçalho de origem (header) à mensagem. Se a request atingir um servidor com a mesma origem, o navegador permitirá a conexão. No entanto, se a solicitação for para uma URL diferente, então é conhecida como uma cross-origin request.

Quando enviando a resposta do servidor, vai ser adicionado o "Access-control-allow-origin" no header, o valor do cabeçalho precisa ser correspondente com a origin header na request, ou também pode ser uma (*) que permite qualquer entrada ou qualquer URL.

Access control origin igual ao caminho de origem

Caso os valores sejam diferentes, o navegador impedirá o compartilhamento dos dados com o cliente, resultando no erro mostrado acima.

You shall not pass gif

Como lidar com problemas de CORS?

Se você estiver vivenciando um erro de CORS agora, debugar é bastante simples, basta abrir a guia do navegador, inspecionar e ir para a guia "Network" (Rede). Encontre a response dos dados/request(API) e procure pelo header de Access-control-allow-origin.

Response header

Se por ventura esse cabeçalho não existir, significa que você precisa habilitar CORS em seu servidor (isso pode ser feito utilizando uma biblioteca NPM, como o NPM cors caso esteja utilizando Express).

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())

app.get('/', (req, res) => {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, () => {
  console.log('CORS-enabled web server listening on port 80')
})
Enter fullscreen mode Exit fullscreen mode

Se por acaso esse header existir e a URL for diferente do seu website/request, você precisará ajustá-lo para corresponder à sua URL e caminho, ou permitir * (Que permite qualquer acesso, mas tome muito cuidado com essa decisão, se tratando de um produto em PROD!), lembrando que tudo isso pode e é configurado através do seu servidor ou backend.

Top comments (2)

Collapse
 
marioslazaro profile image
Mario

Que explicação leve e didática, parabéns Carine!

Collapse
 
carinebatista profile image
Carine Batista

Muito obrigada!