O que é CORS: como resolver um erro de Cross-Origin Resource Sharing e requisição cross-origin bloqueada?

É comum, ao tentar acessar ou logar em uma aplicação web, inserir os dados, clicar em enviar e não visualizar nenhuma resposta aparente na página.

Neste caso, uma ação típica é inspecionar a página e verificar o console do navegador (geralmente acessando pelo F12 ou clicando com o botão direito e selecionando 'Inspecionar'). 

Nesses casos, é possível se deparar com um erro como: "blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted." ou uma mensagem semelhante 

Mas, afinal, o que causa esse tipo de erro? 

Neste artigo, você vai entender o que é CORS, por que ocorre o erro de CORS ('cors error' ou 'cors failed'), o significado de 'strict-origin-when-cross-origin' e como resolver esse problema de CORS na prática 

Política de mesma origem: Same-origin policy 

A política de mesma origem (same-origin policy) é um mecanismo de segurança que restringe como documentos ou scripts de uma origem podem interagir com recursos de outra origem. Esse mecanismo é fundamental para evitar ataques maliciosos e proteger dados sensíveis. 

Duas URLs são consideradas da mesma origem se possuem o mesmo protocolo, host e, quando especificada, a mesma porta. Por exemplo, considere a URL `https://cursos.alura.com.br/category/front-end`, vamos comparar possíveis variações: 

URL	Resultado	Motivo
https://cursos.alura.com.br/category/programacao	Mesma origem	Só o caminho difere
https://cursos.alura.com.br/category/front-end/html-css	Mesma origem	Só o caminho difere
http://cursos.alura.com.br/category/front-end	Erro de CORS	Protocolo diferente (http)
https://cursos.alura.com.br:80/category/front-end	Erro de CORS	Porta diferente (https:// é porta 443 por padrão)
https://store.alura.com.br:80/category/front-end	Erro de CORS	Host 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. 

• `Access-Control-Allow-Origin: http://localhost:3000/` 

Este é o header mais importante para evitar o erro de CORS. Se ele não estiver presente ou configurado corretamente, a requisição cross-origin será bloqueada pelo navegador, resultando no 'cors failed'. 

É possível permitir o acesso de qualquer origem utilizando do símbolo asterisco, veja a seguir: 

• `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. 

CORS: O que é, para que serve e como funciona o Cross-Origin Resource Sharing 

O CORS (Cross-origin Resource Sharing), ou Compartilhamento de Recursos de Origem Cruzada, é fundamental para a segurança da web, mas também é a causa do popular erro de CORS ('cors error') exibido pelos navegadores.

O CORS define se uma requisição cross-origin será permitida ou bloqueada. 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()`. 

Se você já viu mensagens como 'strict-origin-when-cross-origin' ou 'cors failed' no console do navegador, elas estão relacionadas à política de CORS e à maneira como os headers HTTP controlam as permissões de acesso. 

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

• HTTP: Desmistificando o protocolo da Web 
• HTTP: Entendendo a web por baixo dos panos 
• HTTP: GET e POST - Conheça as diferenças entre os métodos 
• Qual é a diferença entre HTTP e HTTPS? 

Como aprender mais sobre o tema?

Além de entender como o CORS funciona, também é importante conhecer os protocolos e mecanismos que sustentam a comunicação entre aplicações na web.

Conceitos como requisições HTTP, métodos GET e POST, headers e políticas de segurança fazem parte da rotina de quem desenvolve APIs, aplicações front-end e integrações entre sistemas. Dominar esses fundamentos ajuda não apenas a resolver erros como o “cors failed”, mas também a criar aplicações mais seguras, escaláveis e preparadas para produção.

Para aprofundar esses conceitos na prática, uma boa recomendação é o curso HTTP: Desmistificando o protocolo da Web, da Alura.

Nele, você aprende como funcionam as requisições HTTP, headers, respostas do servidor, códigos de status e diversos conceitos essenciais para entender problemas relacionados ao CORS e à comunicação entre aplicações web.