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:
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.
Caso os valores sejam diferentes, o navegador impedirá o compartilhamento dos dados com o cliente, resultando no erro mostrado acima.
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.
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')
})
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)
Que explicação leve e didática, parabéns Carine!
Muito obrigada!