Como resolver um erro de Cross-Origin Resource Sharing (CORS)?

Como resolver um erro de Cross-Origin Resource Sharing (CORS)?
Mônica Mazzochi Hillman
Mônica Mazzochi Hillman

Compartilhe

Você já deve ter passado pela situação de estar tentando logar em alguma aplicação, digita seus dados, clica no enviar e não acontece nada na página. A primeira coisa que uma pessoa desenvolvedora faz é inspecionar a página e seguidamente abre o console do navegador (clicando no botão F12 ou apertando com o botão direito do mouse, e na sequência em Inspecionar).

Você se depara com o erro "blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted." ou semelhante.

Console do navegador exibindo o erro Access to script at 'file:///C:/Users/Monica/AppData/Local/Temp/Rar$EXa1584.36965/1823_DOM-projeto_final/projeto_final/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Mas você sabe o que causa isso?

Same-origin policy

A política de mesma origem (same-origin policy) é um mecanismo de segurança que restringe a maneira de um documento ou script de uma origem interagir com o recurso de outra origem. E para que isso serve? Ajuda a evitar ataques maliciosos.

Duas URLs compartilham a mesma origem se o protocolo, porta (caso especificado) e host são os mesmos. Considere a URL https://cursos.alura.com.br/category/front-end, vamos comparar possíveis variações:

URLResultadoMotivo
https://cursos.alura.com.br/category/programacaoMesma origemSó o caminho difere
https://cursos.alura.com.br/category/front-end/html-cssMesma origemSó o caminho difere
http://cursos.alura.com.br/category/front-endErro de CORSProtocolo diferente (http)
https://cursos.alura.com.br:80/category/front-endErro de CORSPorta diferente (https:// é porta 443 por padrão)
https://store.alura.com.br:80/category/front-endErro de CORSHost diferente

Mas, analisando essas variações, como lidamos com situações em que nosso front-end precisa consumir uma API com url diferente sem termos problemas com o CORS? Como no caso de querermos conectar uma API que roda na porta 8000 com uma aplicação React rodando na porta 3000?

Ao enviar uma requisição para uma API de origem diferente, o servidor precisa retornar um header chamado Access-Control-Allow-Origin. Dentro dele, é necessário informar as diferentes origens que serão permitidas, como, por exemplo: Access-Control-Allow-Origin: http://localhost:3000/.

É possível permitir o acesso de qualquer origem utilizando do símbolo *asterisco: `Access-Control-Allow-Origin: `.** Isso não é uma medida recomendada pois permite que origens desconhecidas acessem o servidor, a não ser que seja intencional como no caso de uma API pública.

Afinal, o que é o CORS?

O CORS (Cross-origin Resource Sharing) é um mecanismo usado para adicionar cabeçalhos HTTP que informam aos navegadores para permitir que uma aplicação Web seja executada em uma origem e acesse recursos de outra origem diferente. Esse tipo de ação é chamada de requisição cross-origin HTTP.

É usado para habilitar solicitações entre sites para chamadas XMLHttpRequest ou FetchAPI (entre origens diferentes), web fonts (@font do CSS), texturas WebGL e frames de desenhos usando o drawImage().

Para saber mais sobre o protocolo HTTP e entender mais sobre o funcionamento do CORS, temos diversos conteúdos para você:

Mônica Mazzochi Hillman
Mônica Mazzochi Hillman

Bacharela em Tecnologias Digitais e pós graduanda em User Experience com experiência em suporte técnico de T.I e com tecnologias front-end. Durante a graduação foi vice-presidente do diretório acadêmico e monitora de LIBRAS. Atualmente é instrutora na Alura. Nas horas vagas gosta de assistir animes e produções da marvel, ouvir kpop e post-hardcore, jogar Valorant e Genshin Impact e praticar culinária.

Veja outros artigos sobre Front-end