Pesquisar artigos na Base de Dados de Conhecimento

Base de Conhecimento: Como Resolver Problemas de CORS no 66Analytics

Descrição do Problema

Ao tentar fazer requisições a partir de um frontend em uma aplicação, um erro de CORS (Cross-Origin Resource Sharing) pode ocorrer. Esse erro é mostrado quando o servidor não permite que recursos de diferentes origens (domínios) sejam acessados pelo navegador.

O erro específico que pode ser encontrado é o seguinte:

Access to fetch at 'https://<dominio-do-servidor>/pixel-track/<id>' from origin 'https://<dominio-do-frontend>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

Causas

Esse erro ocorre porque o cabeçalho Access-Control-Allow-Origin está sendo enviado com múltiplos valores (*) ou configurado tanto pelo Nginx quanto pela própria aplicação, o que leva a duplicação ou conflito.

Passos para Resolver o Problema

1. Ajuste no Código da Aplicação

O problema ocorre quando a configuração CORS está sendo feita de maneira redundante tanto no Nginx quanto na aplicação. Para corrigir isso, é necessário remover a configuração do Nginx e garantir que a aplicação PHP seja responsável por definir os cabeçalhos de CORS.

Localização do Código

O código responsável por configurar os cabeçalhos CORS da aplicação está localizado no arquivo:

core/App.php

Código para Corrigir o Problema

No arquivo core/App.php, localize o seguinte bloco de código:

if (Router::$controller == 'PixelTrack') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type');

    /* Check if preflight request */
    //if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') die();
}

Ação necessária:

  • Comente ou remova o código acima, pois ele está tratando erroneamente as requisições preflight (OPTIONS).
  • A remoção dessa configuração permite que a aplicação PHP gerencie corretamente os cabeçalhos de CORS, evitando duplicação de valores como Access-Control-Allow-Origin: *, *.

2. Remover as Configurações de CORS do Nginx

No arquivo de configuração do Nginx, é importante remover qualquer configuração relacionada ao CORS, para garantir que os cabeçalhos de CORS sejam definidos apenas pela aplicação.

Ação necessária:

Remova ou comente a seguinte configuração de CORS no Nginx:

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';

O Nginx não deve definir esses cabeçalhos, pois isso pode causar conflitos com os cabeçalhos gerenciados pela aplicação PHP.

3. Testar com Métodos POST e OPTIONS

Para garantir que a correção tenha sido aplicada corretamente, é importante realizar testes com os métodos POST e OPTIONS, especialmente para validar as requisições preflight.

Testes de Requisição OPTIONS

As requisições OPTIONS são enviadas automaticamente pelo navegador antes das requisições POST ou GET quando a origem da requisição é diferente. Isso é conhecido como preflight request.

Use o cURL ou Postman para testar essas requisições.

  • Usando cURL: Teste com uma requisição OPTIONS para verificar se os cabeçalhos de CORS estão sendo passados corretamente:

    curl -X OPTIONS 'https://<dominio-do-servidor>/pixel-track/<id>' \
  -H 'Origin: https://<dominio-do-frontend>' \
  -H 'Access-Control-Request-Method: POST'

  • Usando Postman: No Postman, configure o método para OPTIONS e defina os cabeçalhos como:

    • Origin: https://<dominio-do-frontend>
    • Access-Control-Request-Method: POST

Se a configuração de CORS estiver correta, você deverá ver os cabeçalhos Access-Control-Allow-Origin, Access-Control-Allow-Methods, e Access-Control-Allow-Headers na resposta.

4. Verificação Final

Após realizar as mudanças e os testes, verifique se o erro de CORS foi resolvido. Não deve haver mais conflitos nos cabeçalhos, e as requisições POST e OPTIONS devem ser processadas corretamente.

Conclusão

A correção desse problema envolve garantir que somente a aplicação PHP defina os cabeçalhos CORS e remover qualquer configuração de CORS no Nginx. Além disso, testes devem ser feitos para validar a resposta de CORS com os métodos POST e OPTIONS, especialmente para garantir que as requisições preflight estão sendo tratadas corretamente!

Você achou esse artigo útil?

Artigos relacionados