CORS policy blocked request: Como Resolver Esse Erro

Visão Geral do Erro

O erro “CORS policy blocked request” é uma mensagem de erro comum que ocorre em aplicações web quando uma tentativa de acesso a recursos de um domínio diferente é bloqueada devido à política de Segurança de Compartilhamento de Recursos de Origem Cruzada (CORS). O CORS é um mecanismo de segurança que impede que páginas da web façam requisições a domínios diferentes do que a página original foi carregada, a menos que o servidor do domínio externo permita explicitamente isso.

Quando este erro ocorre, pode impactar negativamente a funcionalidade de uma aplicação, uma vez que impede a comunicação entre diferentes serviços ou APIs. Neste artigo, vamos explorar as causas comuns deste erro e apresentar métodos de solução eficazes.

Causas Comuns

O erro “CORS policy blocked request” pode ser causado por diversos fatores. Aqui estão algumas das causas mais comuns:

1. Falta de Cabeçalhos CORS no Servidor: O servidor não está configurado para enviar os cabeçalhos CORS necessários.
2. Método HTTP Não Permitido: O método HTTP (GET, POST, etc.) utilizado na requisição não está permitido pelo servidor.
3. Domínio de Origem Não Autorizado: O domínio a partir do qual a requisição está sendo feita não está na lista de domínios permitidos do servidor.
4. Configuração Incorreta do Servidor: Problemas na configuração do servidor que impedem a resposta correta aos cabeçalhos CORS.
5. Requisições Prévias: O servidor não responde corretamente às requisições OPTIONS que são enviadas como parte do processo CORS.

Métodos de Solução

Abaixo, apresentamos alguns métodos que podem ajudar a resolver o erro “CORS policy blocked request”.

Método 1: Configurar Cabeçalhos CORS no Servidor

Para permitir que seu servidor aceite requisições de diferentes origens, você deve configurar os cabeçalhos CORS. Aqui estão os passos a seguir:

1. Identifique o Servidor: Descubra qual tecnologia de servidor está sendo utilizada (Node.js, Apache, Nginx, etc.).
2. Adicione os Cabeçalhos CORS: Dependendo do servidor, você precisará adicionar os seguintes cabeçalhos:

http
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

1. Teste a Configuração: Após adicionar os cabeçalhos, reinicie o servidor e teste a aplicação para verificar se o erro persiste.

Método 2: Verificar Métodos Permitidos

Certifique-se de que o método HTTP utilizado na requisição está permitido pelo servidor:

1. Revise a Documentação da API: Verifique quais métodos são suportados pela API.
2. Atualize a Configuração do Servidor: Se o método não estiver listado, adicione-o à configuração do servidor conforme necessário.

Método 3: Utilizar Proxy para Desenvolvimento

Se você estiver desenvolvendo localmente e não puder alterar as configurações do servidor, considere usar um proxy:

1. Configurar um Proxy Local: Utilize ferramentas como o http-proxy-middleware para redirecionar requisições.

Exemplo com Node.js:

“`javascript
const