Cross-Origin Resource Sharing (CORS) é uma funcionalidade de segurança implementada pelos navegadores da web para restringir páginas da web de fazerem solicitações para um domínio diferente daquele que serviu a página da web. Seu papel é informar ao navegador se o cliente deve ter acesso aos dados solicitados.
O servidor decide se o cliente é um cliente confiável e define os cabeçalhos apropriados com base nisso. Com esses cabeçalhos, o navegador sabe se deve compartilhar os dados com o cliente (isso poderia ser dados usados para substituir parte da página contendo, por exemplo, um formulário de inscrição).
Quando você encontra um erro de CORS, significa que uma página da web está tentando fazer uma solicitação XMLHttpRequest, Fetch API request, ou outro tipo de solicitação HTTP de origem cruzada para um domínio diferente daquele em que a página da web teve origem.
Para lidar com erros de CORS, você tem muitas opções, nós damos algumas ideias:
1. Configuração do lado do servidor
Habilitar CORS no Servidor: Se você controla o servidor, pode configurá-lo para incluir os cabeçalhos CORS apropriados em suas respostas. Normalmente, você faz isso adicionando cabeçalhos como
Access-Control-Allow-Origin
,Access-Control-Allow-Methods
, eAccess-Control-Allow-Headers
na resposta HTTP.Especificar Origens Permitidas: Você pode configurar o servidor para permitir origens específicas acessarem seus recursos. Por exemplo, você pode definir
Access-Control-Allow-Origin:
https://exemplo.com para permitir apenas solicitações de https://exemplo.com acessarem seus recursos.Tratar Solicitações Preflight: Em alguns casos, os navegadores enviam uma solicitação OPTIONS de pré-voo antes de fazer a solicitação real. Você deve lidar com essa solicitação OPTIONS e responder com os cabeçalhos CORS apropriados.
2. Servidor Proxy
Configure um servidor proxy em seu domínio que encaminhe as solicitações para o domínio externo. Dessa forma, seu frontend faz solicitações para seu próprio domínio, evitando problemas de CORS, já que as solicitações agora são de mesma origem.
3. JSONP (JSON com Preenchimento)
Se você estiver buscando dados e o servidor suportar JSONP, você pode usar solicitações JSONP. JSONP funciona adicionando dinamicamente uma tag de script ao seu documento HTML, e o servidor responde com JSON envolvido em uma chamada de função.
4. Extensões de bypass de CORS
Você pode usar extensões de navegador como "CORS Everywhere" ou "Allow CORS: Access-Control-Allow-Origin" para temporariamente desabilitar as restrições de CORS enquanto você está desenvolvendo ou testando.
5. Usar código do lado do servidor
Se você tem controle sobre o servidor, pode criar código do lado do servidor para agir como um proxy. Seu frontend envia uma solicitação para seu servidor, e seu servidor encaminha a solicitação para o domínio externo, e então retorna a resposta para seu frontend.
6. Conexões WebSocket
Se você estiver lidando com conexões WebSocket, problemas de CORS podem não se aplicar da mesma forma que as solicitações HTTP tradicionais. As conexões WebSocket são iniciadas com um handshake e não têm as mesmas restrições.
7. Considere alternativas ao CORS
Em alguns casos, você pode considerar alternativas como JSONP, Cross-Origin Embedding (COEP) ou Cross-Origin Opener Policy (COOP) dependendo do seu caso de uso específico e do suporte do navegador.
Essas são apenas sugestões de soluções; você mesmo deve verificar se pode adotar alguma delas.
Precisa de mais ajuda?
Se tiver perguntas adicionais relacionadas ao bloqueio do script edrone na página da sua loja, entre em contato conosco via chat ou pelo e-mail hello@edrone.me