Como corrigir o erro CORS no WordPress? (Guia fácil)

Se você administra um site, encontrar erros é inevitável, e um desses problemas, embora não esteja entre os erros comuns do WordPress, é o erro CORS.

Esse erro ocorre quando seu site WordPress tenta acessar recursos de uma origem diferente (domínio, protocolo ou porta) e o servidor que hospeda esses recursos não permite. 

Resolver erros de CORS é crucial, pois eles podem interromper funções essenciais, como chamadas de API, carregamento de fontes e solicitações AJAX, afetando negativamente o desempenho do seu site e a experiência do usuário.

Este guia fornece uma visão geral das etapas que você pode seguir para identificar e corrigir erros de CORS no WordPress, garantindo que seu site permaneça funcional e fácil de usar.

Resumo: Resolvendo problemas de compartilhamento de recursos entre origens (CORS)

• Esse erro ocorre quando seu site solicita recursos de outro domínio sem os cabeçalhos de permissão adequados. Os navegadores bloqueiam a solicitação para proteger a segurança do usuário.

• Isso pode interromper chamadas de API, fontes, recursos de CDN, solicitações AJAX e widgets incorporados, afetando o desempenho e a experiência do usuário.

• Identifique o problema usando o console do navegador e a aba de rede. Procure por solicitações bloqueadas e cabeçalhos Access-Control-Allow-Origin ausentes.

• Corrija o problema atualizando as configurações do servidor, o arquivo .htaccess, as funções do tema, as regras da CDN ou entrando em contato com o provedor de recursos para obter a configuração adequada.

O que é um erro CORS?

O Compartilhamento de Recursos de Origem Cruzada (CORS, na sigla em inglês) é um recurso de segurança implementado pelos navegadores da web para impedir que sites maliciosos acessem informações confidenciais em outros sites sem permissão.

Ele funciona verificando se o servidor que hospeda o recurso inclui cabeçalhos específicos que concedem permissão para solicitações de origem cruzada. 

Um erro CORS ocorre quando uma página da web tenta acessar recursos de um domínio, protocolo ou porta diferente, mas o servidor não permite.

Os cenários típicos em que ocorrem erros de CORS no WordPress incluem:

• Obtenção de dados de API externa: Quando seu site WordPress tenta obter dados de uma API externa, um erro CORS pode ocorrer se o servidor da API não permitir que seu site acesse seus recursos.

• Carregando fontes de outro domínio: Se você usar fontes personalizadas hospedadas em um domínio diferente, poderá encontrar erros de CORS caso o servidor de fontes não permita que seu site carregue essas fontes.

• Utilizando uma CDN para recursos estáticos: Quando imagens, arquivos CSS ou JavaScript são servidos a partir de uma CDN, podem ocorrer erros de CORS se o da CDN não tiver os cabeçalhos corretos para permitir que seu site acesse esses arquivos.

• Realização de requisições AJAX: Se o seu site WordPress fizer AJAX para um endpoint de API REST personalizado em um subdomínio diferente, erros de CORS podem ocorrer se o servidor da API não permitir explicitamente essas requisições.

• Incorporação de widgets de terceiros: Por fim, a incorporação de widgets de outros domínios usando iframes pode levar a erros de CORS se o servidor de widgets não permitir acesso entre origens diferentes.

Como os erros de CORS afetam a funcionalidade do site e a experiência do usuário?

Erros de CORS podem bloquear funcionalidades cruciais do seu site, como o carregamento de dados externos, fontes personalizadas ou scripts. Como resultado, seu site pode não ser exibido corretamente ou não funcionar plenamente, levando a uma experiência ruim para o usuário.

Por exemplo, funcionalidades que dependem de APIs externas podem falhar, fontes personalizadas podem não carregar ou elementos interativos que utilizam AJAX podem apresentar problemas.

Portanto, resolver erros de CORS é essencial para garantir que seu site funcione sem problemas e ofereça uma experiência de usuário perfeita.

Identificando erros de CORS no WordPress

Seguindo esses passos, você poderá identificar facilmente erros de CORS em seu site WordPress.

Verifique o console do navegador: do seu navegador as ferramentas de desenvolvedor (pressionando F12 ou clicando com o botão direito do mouse na página e selecionando "Inspecionar"). Acesse a guia "Console" para ver quaisquer mensagens de erro.

No console, procure por mensagens que mencionem “Política CORS” ou “Compartilhamento de Recursos de Origem Cruzada”. Essas mensagens geralmente indicam que um recurso foi bloqueado devido ao CORS.

Nas ferramentas de desenvolvedor, acesse a aba “Rede” e recarregue a página.

• Procure por quaisquer solicitações marcadas em vermelho, indicando que elas falharam.
• Clique nessas solicitações para ver mais detalhes sobre o erro, incluindo problemas relacionados ao CORS.

Analise os cabeçalhos de resposta da API: Ao trabalhar com APIs, inspecione os cabeçalhos de resposta na guia "Rede". Verifique se o cabeçalho "Access-Control-Allow-Origin" está presente e configurado corretamente.

Verifique as configurações do plugin: Se você estiver usando plugins que interagem com recursos externos, revise as configurações e a documentação deles para garantir que lidem corretamente com o CORS.

Utilize ferramentas online: Use ferramentas como o CORS Checker para testar se os recursos externos que você está tentando acessar estão configurados corretamente para permitir solicitações de origem cruzada.

Leia sobre: ​​Dicas para corrigir erros de atualização e publicação do WordPress

Exemplos de erros de CORS no WordPress e passos para corrigi-los

Aqui estão alguns cenários comuns em que ocorrem erros de CORS no WordPress, juntamente com etapas simples para corrigi-los.

Exemplo 1: Obtendo dados de uma API externa

Seu site WordPress tenta obter dados de uma API externa, mas falha.

Mensagem de erro:

O acesso à API 'https://api.example.com/data' a partir da origem 'https://yourwordpresssite.com' foi bloqueado pela política CORS: o cabeçalho 'Access-Control-Allow-Origin' não está presente no recurso solicitado.

Método para corrigir: Modifique o arquivo .htaccess no diretório raiz do seu WordPress:

<IfModule mod_headers.c>Cabeçalho definido como Access-Control-Allow-Origin "*"</IfModule>

Isso instrui o servidor a permitir que qualquer site acesse o recurso.

Leia também: Como corrigir erros 301 no WordPress

Exemplo 2: Carregando fontes de outro domínio

Seu site WordPress usa fontes personalizadas hospedadas em um domínio diferente, mas elas não carregam.

Mensagem de erro:

O acesso à fonte em 'https://fonts.example.com/font.woff2' a partir da origem 'https://yourwordpresssite.com' foi bloqueado pela política CORS: o cabeçalho 'Access-Control-Allow-Origin' não está presente no recurso solicitado.

Método para corrigir: Adicione o seguinte código ao arquivo functions.php do seu tema:

function add_cors_headers() { header("Access-Control-Allow-Origin: *"); } add_action('init', 'add_cors_headers');

Isso ajuda a adicionar os cabeçalhos CORS necessários a todas as respostas.

Exemplo 3: Usando uma CDN para ativos estáticos

Seu site WordPress utiliza imagens, arquivos CSS ou JavaScript de uma CDN, mas eles estão bloqueados.

Mensagem de erro:

O acesso ao script em 'https://cdn.example.com/script.js' a partir da origem 'https://yourwordpresssite.com' foi bloqueado pela política CORS: O cabeçalho 'Access-Control-Allow-Origin' contém múltiplos valores '*, *', mas apenas um é permitido.

Método para corrigir: Se você estiver usando o Apache, pode adicionar o seguinte ao seu arquivo de configuração:

<IfModule mod_headers.c>Cabeçalho definido como Access-Control-Allow-Origin "*"</IfModule>

Se você estiver usando o Nginx, adicione isto à sua configuração:

localização / { adicionar_cabeçalho 'Access-Control-Allow-Origin' '*'; }

Exemplo 4: Fazendo requisições AJAX

Seu site WordPress faz solicitações AJAX para um endpoint de API REST personalizado em um subdomínio diferente, mas elas estão sendo bloqueadas.

Mensagem de erro:

O acesso ao XMLHttpRequest em 'https://api.yourwordpresssite.com/endpoint' a partir da origem 'https://yourwordpresssite.com' foi bloqueado pela política CORS: A resposta à solicitação de verificação prévia não passou na verificação de controle de acesso: Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado.

Método para corrigir: Instale e ative o plugin Enable CORSe, em seguida, configure as definições para permitir o seu subdomínio.

Exemplo 5: Incorporando widgets de terceiros

Seu site WordPress incorpora widgets de outros domínios usando iframes, mas eles não carregam.

Mensagem de erro:

O acesso ao recurso em 'https://widget.example.com/' a partir da origem 'https://yourwordpresssite.com' foi bloqueado pela política CORS: o cabeçalho 'Access-Control-Allow-Origin' não está presente no recurso solicitado.

Método para corrigir: Solicite ao provedor terceirizado que adicione seu domínio ao Access-Control-Allow-Origin . Como alternativa, você pode tentar adicionar o seguinte ao seu arquivo .htaccess:

<IfModule mod_headers.c>Cabeçalho definido como Access-Control-Allow-Origin "*"</IfModule>

Saiba mais sobre: ​​O que são erros 404? Como corrigi-los?

Outros métodos para resolver erros de CORS no WordPress

Aqui estão alguns métodos adicionais para resolver erros de CORS e garantir o funcionamento perfeito do seu site WordPress.

• Usando o Cloudflare: Se você usa o Cloudflare, pode configurar regras personalizadas para gerenciar cabeçalhos CORS por meio do painel do Cloudflare. Os Cloudflare Workers também podem ser usados ​​para adicionar ou modificar cabeçalhos à medida que as solicitações passam pela rede.

• Modificando o arquivo functions.php do tema: Outra maneira é adicionando o seguinte código ao arquivo functions.php do seu tema. Insira o seguinte código para habilitar o CORS:

function add_cors_headers() { header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Authorization"); } add_action('init', 'add_cors_headers');

• Utilizando um proxy CORS: Um proxy CORS atua como um servidor intermediário que gerencia as requisições entre o seu site e o recurso externo. Ele adiciona os cabeçalhos CORS necessários antes de encaminhar a resposta para o seu site.

• Middleware personalizado: Implemente um middleware personalizado em seu servidor para adicionar os cabeçalhos CORS necessários às respostas. Isso pode ser feito usando linguagens de script do lado do servidor, como PHP, Node.js ou Python.

• Serviços de terceiros: Alguns serviços e APIs de terceiros incluem suporte CORS integrado. Consulte a documentação do serviço externo para verificar se ele oferece opções para habilitar o CORS para o seu domínio.

• Contatando o provedor do servidor externo: Entre em contato com o provedor do recurso externo e solicite que ele adicione seu domínio ao Access-Control-Allow-Origin cabeçalho

• Configurando as Definições do Servidor: Você pode configurar as definições do seu servidor para corrigir erros de CORS. Por exemplo, se estiver usando o Apache, você pode adicionar o seguinte ao seu arquivo de configuração:

<IfModule mod_headers.c>Cabeçalho definido como Access-Control-Allow-Origin "*" Cabeçalho definido como Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Cabeçalho definido como Access-Control-Allow-Headers "Content-Type, Authorization"</IfModule>

Para o Nginx, você pode usar:

location / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; return 204; } add_header 'Access-Control-Allow-Origin' '*'; }

Como testar se o problema de CORS foi resolvido?

Primeiro, atualize seu site WordPress para verificar se as alterações surtem efeito. Às vezes, uma simples atualização da página pode revelar se o erro de CORS foi corrigido.

• Verifique o console do navegador: abra as ferramentas de desenvolvedor do seu navegador, acesse a guia "Console" e procure por mensagens de erro relacionadas ao CORS. Se não houver nenhuma, o problema pode estar resolvido.

• Revisar solicitações de rede: acesse a guia "Rede" nas ferramentas de desenvolvedor e recarregue a página. Verifique se as solicitações que estavam falhando foram corrigidas. Clique nessas solicitações para verificar se os cabeçalhos corretos estão presentes.

• Testar funcionalidade: Verificar se as funcionalidades que estavam apresentando falhas devido a erros de CORS, como chamadas de API, carregamento de fontes ou requisições AJAX, agora estão funcionando conforme o esperado.

Você também pode usar ferramentas online de verificação CORS para verificar se os recursos externos que você está acessando estão configurados corretamente para permitir solicitações de origem cruzada.

Aprenda: Como realizar um teste de usabilidade em sites WordPress

Melhores práticas para configuração de CORS

Seguindo essas boas práticas, você pode configurar o CORS com segurança e garantir que seu site WordPress permaneça protegido e funcionando sem problemas.

• Permitir Origens Específicas: Em vez de permitir todas as origens com um caractere curinga (*), especifique as origens exatas autorizadas a acessar seus recursos. Isso aumenta a segurança, limitando o acesso a domínios confiáveis.

• Limitar métodos permitidos: Permita apenas os métodos HTTP necessários para sua aplicação, como GET, POST e OPTIONS. Isso minimiza o risco de ações não autorizadas.

• Restringir cabeçalhos: Permita apenas os cabeçalhos específicos que seu aplicativo precisa. Isso evita a exposição desnecessária de informações confidenciais. Por exemplo, permita “Content-Type” e “Authorization” se forem necessários.

• Use solicitações de pré-voo: Para solicitações que possam afetar dados do servidor, certifique-se de que as solicitações de pré-voo sejam usadas. Isso envolve o navegador enviando uma OPTIONS para verificar as permissões antes de fazer a solicitação propriamente dita.

• Defina um tempo máximo de armazenamento adequado: Defina o Access-Control-Max-Age para especificar por quanto tempo os resultados de uma solicitação de pré-voo podem ser armazenados em cache. Isso reduz o número de solicitações de pré-voo que seu servidor processa, melhorando o desempenho.

Por fim, revise e monitore regularmente sua configuração CORS para garantir que ela atenda aos seus requisitos de segurança e funcionalidade. Atualize as configurações conforme seu aplicativo evolui.

Para saber mais: Otimização de desempenho do banco de dados WordPress

Conclusão

Corrigir erros de CORS no WordPress é essencial para manter a funcionalidade e a experiência do usuário do seu site.

Ao entender os cenários comuns e aplicar as soluções adequadas, você pode resolver esses problemas de forma eficaz.

No entanto, se você continuar a encontrar problemas ou se as soluções parecerem muito complexas, não hesite em procurar ajuda profissional.

profissionais Serviços podem oferecer assistência especializada, garantindo que seu site funcione sem problemas e sem interrupções relacionadas ao CORS.

Perguntas frequentes sobre o erro CORS no WordPress